如何延迟JavaScript文件的加载

How to defer loading of JavaScript file?

本文关键字:JavaScript 文件 加载 延迟 何延迟      更新时间:2023-09-26

我不想在启动时调用JavaScript函数。原因很简单,它将减少初始下载大小,页面将出现得更快。为了做到这一点,我在head节中使用了以下代码…

<script type="text/javascript">
 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }
 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
</script>

但它没有工作…

通常,最好将脚本放在正文的末尾,并立即调用它们。

脚本阻止了页面的加载,所以把它们放在正文的末尾可以让页面快速加载,并且javascript将加载已经准备好的页面。

document.head.appendChild(element)

您可以使用<script defer> (HTML脚本标签上的defer属性)

的例子:

<script src="link/to/yourfile.js" defer></script>

defer将在HTML解析期间下载该文件,并仅在解析器完成后执行该文件。延迟脚本也保证按照它们在文档中出现的顺序执行。