延迟Javascript加载

Question

我的页面加载非常重要.加载后我有一个非常需要的javascript文件,直到页面加载后10秒.如何在不降低初始页面负载的情况下最好地加载外部工作表？

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

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

我对分析这是否"值得"感兴趣.

(注意:我实际上是在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;
    document.documentElement.firstChild.appendChild(script);
}

通过调用该函数

loadJs("your-script.js");

在设定的时间后加载JS，

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

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

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