如何使用延遲和內聯腳本保留腳本執行順序？

Question

無論如何，是否保留了“延遲”或內聯腳本的執行順序？

例如。 考慮以下情形-

<head>
  <script src="/polyfills.js" />
  <script>
  // Small inline script that needs polyfills to work
  </script>
  <script src="/feature1.js" defer>
  <script src="/feature2.js" defer>
</head>

我的目標是使所有腳本具有defer行為並保持執行順序。 但是，在這里，我不能將defer添加到polyfills腳本中，因為這樣做會破壞內聯腳本。

預期執行順序

polyfills (defer) => inline-script (how?) => feature1 => feature2

內聯腳本是一個很小的代碼片段，不值得浪費請求。

例如，是否可以編寫一個包裝內聯腳本並僅在polyfill加載后才執行的函數？

Answer 1

如果您希望它保留一個嵌入式內聯腳本的順序，那么就延遲而言，我認為您已經塞滿了。

內聯腳本不會延遲，因此就延遲的“之前”和“之后”腳本而言，它會失去順序。
您可以使用此答案中的技巧，但是window.onload偵聽器將等待所有延遲的腳本，而不僅僅是等待三明治腳本之前的腳本（您的polyfill）。 您不能從推遲“之前”而不是“之后”中受益。

如果所有三個src'd腳本都被推遲，則沒有自然發生的中間事件（在polyfill之后但在功能之前）可以觸發處理程序-這就是您想要的。

作為記錄，這里介紹了如何延遲內聯腳本，直到所有延遲的腳本都加載完畢，這可能會帶來一些好處，但沒有您期望的那么多。

<head>
  <script src="/polyfills.js" defer></script>
  <script src="/feature1.js" defer></script>
  <script src="/feature2.js" defer></script>
  <script>
    window.addEventListener('load', function() {
      // Small inline script that needs polyfills to work
    });
  </script>
</head>

Answer 2

由於defer屬性僅適用於帶有src的外部腳本標簽。 這是內聯腳本可以模仿延遲的方法。 使用DOMContentLoaded事件。

<script src="/polyfills.js" defer></script>
<script src="/feature1.js" defer></script>
<script src="/feature2.js" defer></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Your inline scripts which uses methods from polyfills.js.
  });
</script>

這是因為，延遲屬性腳本完全加載后，將觸發DOMContentLoaded事件。 您可能不必等待“加載”事件。

這是您能做的最接近的事情。

Answer 3

根據此答案，從技術上講是可能的，只要您願意對腳本進行base64編碼並將其設置為數據源即可。 如果出了什么問題，這將是調試的噩夢，但是如果您必須按照適當的延遲順序包含一個小的內聯片段，這可能是您的唯一選擇。

如何使用延遲和內聯腳本保留腳本執行順序？

問題描述

預期執行順序

3 個解決方案

解決方案1
2 2016-10-23 06:37:44

解決方案2
1 2017-03-01 08:01:17

解決方案3
0 2018-08-24 22:03:05

如何使用延遲和內聯腳本保留腳本執行順序？

問題描述

預期執行順序

3 個解決方案

解決方案1 2 2016-10-23 06:37:44

解決方案2 1 2017-03-01 08:01:17

解決方案3 0 2018-08-24 22:03:05

解決方案1
2 2016-10-23 06:37:44

解決方案2
1 2017-03-01 08:01:17

解決方案3
0 2018-08-24 22:03:05