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

【问题标题】：How to preserve script execution order with defer and inline scripts?如何使用延迟和内联脚本保留脚本执行顺序？
【发布时间】：2016-10-23 04:34:38
【问题描述】：

是否可以保留混合了“延迟”或内联的脚本的执行顺序？

例如。考虑以下场景 -

<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 加载后执行）？

【问题讨论】：

你读过this answer吗？

标签： javascript performance page-load-time

【解决方案1】：

如果您希望它保留夹在中间的内联脚本的顺序，那么，关于延迟，我认为您已经被塞满了。

内联脚本不会延迟，因此对于延迟的“之前”和“之后”脚本会失去其顺序。
您可以使用this answer 中的技巧，但window.onload 侦听器将等待所有延迟脚本，而不仅仅是那些在夹层脚本（您的polyfills）之前的脚本。你不能从推迟“之前”而不是“之后”中受益。

如果所有三个 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>

【讨论】：

【解决方案2】：

因为 defer 属性仅适用于带有 src 的外部脚本标签。这是您可以为内联脚本模拟 defer 的方法。使用 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 事件在延迟属性脚本完全加载后触发。您可能不必等待“加载”事件。

这是你能做的最接近的。

【讨论】：

【解决方案3】：

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

【讨论】：