Question

无论如何都要保留脚本的执行顺序，这些脚本混合了“延迟”和＃39;还是内联？

例如。考虑以下情况 -

<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

如果你希望它保留夹心内联脚本的顺序，那么，关于推迟，我认为你被塞满了。

内联脚本不会推迟，因此会针对延迟的“之前”和“之后”脚本丢失其顺序。
您可以使用this answer中的技巧，但是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事件将触发。您可能不必等待“加载”＃39;事件

这是你能做的最接近的事。

Answer 3

根据this answer，在技术上是可行的，只要您愿意对脚本进行base64编码并将其设置为数据源即可。如果出现问题，这将是调试的噩梦，但如果您有一个小的内联片段，必须按正确的延迟顺序包含，这可能是您的唯一选择。

如何使用延迟和内联脚本保留脚本执行顺序？

预期执行订单

3 个答案: