Javascript 如何使用延迟脚本和内联脚本保持脚本执行顺序？_Javascript_Performance_Page Load Time

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

javascript performance

Javascript 如何使用延迟脚本和内联脚本保持脚本执行顺序？,javascript,performance,page-load-time,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> <

对于混合了“延迟”或内联的脚本，是否仍有保留执行顺序的方法

例如，考虑下面的场景-

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

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

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

如果您希望它保留三明治内联脚本的顺序，那么，关于延迟，我认为您已经吃饱了

内联脚本不会延迟，因此会丢失延迟的“之前”和“之后”脚本的顺序
您可以使用来自的技巧，但是window.onload侦听器将等待所有延迟的脚本，而不仅仅是三明治脚本（您的多边形填充）之前的脚本。你不能从推迟“之前”而不是“之后”中获益

如果所有三个src'd脚本都被延迟，那么就不会有自然发生的中间事件（在polyfills之后但在特性之前）触发处理程序-这就是您想要的

作为记录，这里介绍了如何延迟一个内联脚本，直到所有延迟的脚本都加载完毕，这可能会带来一些好处，但没有您希望的那么多

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


addEventListener（'load'，function（））{
//需要多边形填充才能工作的小型内联脚本
});

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>


document.addEventListener（“DOMContentLoaded”，function（））{
//使用polyfills.js中的方法的内联脚本。
});

这是因为，DOMContentLoaded事件在延迟属性脚本完全加载后激发。您可能不必等待“加载”事件

这是最接近您所能做的。

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

您阅读了吗？

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