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

How to preserve script execution order with defer and inline scripts?

本文关键字：脚本 执行 顺序 何使用 延迟      更新时间：2023-09-26

是否有办法保留"延迟"或内联混合脚本的执行顺序?

例如

。考虑以下场景-

<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

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

例如，我可以写一个函数，将内联脚本包装和执行，如果只有在填充加载后)?

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

  • 内联脚本不会延迟，因此失去了延迟的"before"answers"after"脚本的顺序。
  • 你可以从这个答案中使用窍门，但是一个窗口。Onload侦听器将等待所有延迟的脚本，而不仅仅是那些夹在脚本(您的polyfills)之前的脚本。你不能从推迟"之前"而不是"之后"中获益。

如果所有三个src脚本都被延迟，那么就没有自然发生的中间事件(在填充之后但在特性之前)来触发处理程序-这就是您想要的。

请注意，下面是如何延迟内联脚本，直到所有延迟的脚本都加载完成，这可能会提供一些好处，但没有您希望的那么多。

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

As 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事件在延迟属性脚本完全加载后触发。你可能不需要等待'load'事件。

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

相关文章：