延迟 Javascript 加载答案

【问题标题】：Delay Javascript Loading延迟 Javascript 加载
【发布时间】：2016-07-02 04:10:06
【问题描述】：

快速加载我的页面非常重要。加载后，我有一个非常 javascript 文件，直到页面加载后 10 秒才“需要”任何东西。如何在不减慢初始页面加载速度的情况下最好地加载外部工作表？

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

我将如何导入 javascript？这甚至会加快页面加载速度吗？其他一些技术会起作用吗？

我对分析这是否“值得”不感兴趣。

（注意：我实际上是在 chrome 扩展的上下文中执行此操作的，我认为这不会很重要）

【问题讨论】：

追加一个新创建的脚本元素，并将src 设置为文件的url

标签： javascript asynchronous google-chrome-extension import

【解决方案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>

【讨论】：

对于OP的帖子，我觉得defer更好，不是吗？因为async 仍然会在加载时阻止渲染，所以如果path/script.js 很小，它不会有太大帮助
我同意。我没有使用defer 的原因是因为根据 MDN，它还没有被所有主要浏览器实现。尽管我很难找到任何其他资源来验证该声明。有什么想法吗？
天哪，好点子！我没想到。我猜 OP 说他们是在 Chrome 扩展中做的，而 Chrome def 有defer。我觉得大多数版本的 IE 可能都没有，你是对的
确实如此。因为它是用于 Chrome 扩展的，所以它应该可以正常工作

【解决方案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");
}

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

就像大多数分析脚本（例如来自 Google 的分析脚本）一样，它们通常位于页面底部，因此不会干扰可见内容的加载。我认为通过准确计时加载与对内容/任何资源加载进行排序并没有什么好处。这是众多技术中的一种，但并不确切知道代码中发生了什么。

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

【讨论】：

延迟加载资源允许更快触发加载事件