延迟加载Javascript

Question

我的页面加载速度非常重要。加载后，我有一个非常重要的JavaScript文件，但它在页面加载后10秒钟内并不是“必需”的。如何最好地加载外部样式表而不会减慢初始页面加载速度？

setTimeout(function(){
    //import Javascript
},500); 

我该如何导入JavaScript？这样做会加快页面加载速度吗？还有其他方法可行吗？

我不想分析这是否“值得”。

（注：我实际上是在Chrome扩展的上下文中执行此操作，我认为这不会有太大影响）

- COMisHARD

---

追加一个新创建的脚本元素，并将 src 设置为您文件的 URL。 - charlietfl

Answer 1

使用async属性，使脚本不会阻塞页面的渲染。 <script src="path/script.js" async></script> 如果你真的不想让脚本在页面加载后执行，那么可以将代码包装在window.onload中。这样脚本的下载就不会阻塞页面的渲染，直到页面加载完成后才会执行你的代码。

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript?hl=en

---

编辑：

另一个更好的选择（如果您的浏览器支持）是 defer，因为它实际上会等待整个 DOM 加载完成，而不是像async一样仅使脚本加载并行化。因此：

<script src="path/script.js" defer></script>

- Henry Williams

---

对于OP的帖子，我觉得使用defer更好，不是吗？因为无论何时加载async都会阻止渲染，所以如果path/script.js很小，它并不能提供太多帮助。 - Jay

我同意。我没有选择使用defer的原因是根据MDN的说法，并不是所有主流浏览器都已经实现了它。虽然我很难找到其他能够证实这个说法的资源。你有任何想法吗？ - Henry Williams

哦，好主意！我没有想到那个。不过，OP说他们正在使用Chrome扩展程序，而Chrome肯定有“defer”。我觉得大多数版本的IE可能没有，你是对的。 - Jay

没错。既然是针对Chrome扩展，那么应该可以很好地工作。 - Henry Williams

Answer 2

试试这个：

function loadJs(url) {
    var script = document.createElement('script');
    script.src = url;
    document.documentElement.firstChild.appendChild(script);
}

通过调用函数来执行

loadJs("your-script.js");

在一段时间后加载JS：

setTimeout(function(){
    loadJs("your-script.js");
},500); 

当所有其他组件都加载完毕时，您也可以调用它。

window.onload = function() {
  loadJs("your-script.js");
}

- Sid Vishnoi

Answer 3

就像大多数分析脚本一样，例如来自Google的脚本，它们通常位于页面底部，以便不会干扰可视内容的加载。我认为通过精确计时加载与顺序排列内容/任何资源加载并没有太多收益。这是许多技术之一，而不知道您的代码中发生了什么。

您可以查看此文章https://varvy.com/pagespeed/defer-loading-javascript.html。

- 1001b

---

延迟加载资源可以让加载事件更早地触发。 - charlietfl

Answer 4

将您的脚本放在</body>之前，并将所有JavaScript放入单个文件中。避免加载多个.js文件。就这样。

- Ronnie Royston