Question

我的页面加载非常重要。加载后我有一个非常需要的javascript文件＆＃34;对于页面加载后10秒内的任何内容。如何在不降低初始页面负载的情况下最好地加载外部工作表？

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

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

我对这是否值得分析并不感兴趣。＆＃34;

（注意：我实际上是在Chrome扩展的情况下这样做，我认为这不会很重要）

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>

Answer 2

试试这个：

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

通过

调用该函数

loadJs("your-script.js");

在设定的时间后加载JS，

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

您也可以在加载所有其他组件时调用它

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

Answer 3

就像大多数分析脚本一样，例如来自Google的分析脚本，它们通常位于页面底部，因此它不会干扰可视内容的加载。我认为通过计算内容/任何资源加载的加载与排序完全没有多少收获。这是众多技术中的一种，却不知道代码中究竟发生了什么。

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

Answer 4

在</body>之前保持您的脚本正确，并将所有JavaScript放在一个文件中。避免加载几个.js文件。那就是它。

延迟Javascript加载

4 个答案: