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

Question

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

Shu*_*dia 5 javascript performance page-load-time

无论如何，是否可以保留“延迟”或内联混合的脚本的执行顺序？

例如。考虑以下场景 -

<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>

Run Code Online (Sandbox Code Playgroud)

我的目标是让所有脚本都有defer行为并保持执行顺序。但是，在这里，我无法添加defer到 polyfills 脚本，因为这样做会破坏内联脚本。

预期执行顺序

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

Run Code Online (Sandbox Code Playgroud)

内联脚本是一个很小的代码片段，不值得浪费一个请求。

例如，我可以编写一个函数来包装内联脚本并仅在填充填充加载后执行）吗？

Answer 1

Roa*_*888 3

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

内联脚本不会延迟，因此会丢失延迟的“之前”和“之后”脚本的顺序。
您可以使用此答案中的技巧，但是 window.onload 侦听器将等待所有延迟的脚本，而不仅仅是夹层脚本（您的填充脚本）之前的脚本。你不能从推迟“之前”而不是“之后”中受益。

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，1 月前
查看次数：	3612 次
最近记录：	7 年，3 月前