Question

我在这里读了一篇文章：

https://varvy.com/pagespeed/defer-loading-javascript.html

它说我应该使用这样的东西来加载javascript：

<script type="text/javascript">
function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "defer.js";
  document.body.appendChild(element);
}
if (window.addEventListener)window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

我想知道，如果我要加载多个defer.js，它将以什么顺序执行？

例如：

<script type="text/javascript">
function downloadJSAtOnload() {
  var element1 = document.createElement("script");
  element.src = "defer1.js";
  document.body.appendChild(element);

  var element2 = document.createElement("script");
  element.src = "defer2.js";
  document.body.appendChild(element);
}
if (window.addEventListener)window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

defer1.js是否会在defer2.js之前执行？

由于

Answer 1

appendChild()同步附加脚本节点，但它以异步方式加载脚本。所以执行顺序是未定义的（它取决于网络延迟）。

Answer 2

我想知道，如果我要加载多个defer.js，它将以什么顺序执行？

乱。

defer1.js是否会在defer2.js之前执行？

没有

当您像这样动态添加脚本时，无法保证订单。他们会在检索后立即投放，因此如果defer2.js的检索速度比defer1.js更快，则会先运行。

要按顺序执行这些操作，您必须按顺序请求它们，这意味着在您收到defer2.js事件之前，您无法请求load defer1.js。这意味着您将更慢地下载JavaScript，因为浏览器无法并行生成请求，如果您只是在结束前将脚本标记放在文档的末尾，则可以执行此操作{ {1}}标记。

您已经说过，您担心从PageSpeed Insights获得一个不太完美的分数。别担心。尽管您的链接文章说明了，但PageSpeed Insights足够智能，可以知道在关闭</body>标记之前的script标记不会造成任何加载时问题。例如，如果您使用正确的缓存标头为JavaScript提供此页面，则会在PageSpeed Insights上收到100/100：

</body>

（<!doctype html> <html> <head> <meta charset="utf-8"> <title>Testing</title> <meta name=viewport content="width=device-width, initial-scale=1"> <style> body { font-size: 16px; } </style> </head> <body> <p>Testing 1 2 3.</p> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="script1.js"></script> <script src="script2.js"></script> </body> </html>和script1.js中有一些jQuery代码。）

当然，在可能的情况下，避免使用多个脚本（例如，如果可以的话，请将script2.js和script1.js组合在一起;有关于是否在该组合文件中包含jQuery或使用的方法存在争议如上所述的CDN。）

Answer 3

defer1.js此脚本将先加载然后加载 defer2.js一个负载等等

在这种情况下，动态添加脚本文件的执行顺序是什么？

3 个答案: