Web性能优化系列（3）：如何延迟加载JS

时间 2019-11-13

标签 web 性能优化系列如何延迟加载栏目 HTML 繁體版

原文原文链接

本文由伯乐在线 - J.c 翻译，sunbiaobiao 校稿。未经许可，禁止转载！
英文出处：www.feedthebot.com。欢迎加入翻译小组。javascript

延迟加载JavaScript

JavaScript的延迟加载是那些在web上，能让你想抓狂地去寻找解决方案的问题之一。css

不少人说“那就用defer”或“async”，甚至有些人说“那就将你的javascript代码放在页面代码底部”。html

上述方法都不能解决在web页面彻底加载后，再加载外部js的问题。上述方法也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。因此这里的解决方案将是来自Google帮助页面的推荐方案。java

如何延迟加载JavaScript

下面是Google推荐的代码。这些代码应被放置在</body>标签前(接近HTML文件底部)。另外，我将外部JS文件名突出显示。web

 
         <script type= 
         "text/javascript" 
         > 
        
         function 
         downloadJSAtOnload() { 
        
         var 
         element = document.createElement( 
         "script" 
         ); 
        
         element.src =  
         "defer.js" 
         ; 
        
         document.body.appendChild(element); 
        
         } 
        
         if 
         (window.addEventListener) 
        
         window.addEventListener( 
         "load" 
         , downloadJSAtOnload,  
         false 
         ); 
        
         else 
         if 
         (window.attachEvent) 
        
         window.attachEvent( 
         "onload" 
         , downloadJSAtOnload); 
        
         else 
         window.onload = downloadJSAtOnload; 
        
         </script>

这里作了什么？

这段代码意思是等到整个文档加载完后，再加载外部文件“defer.js”。浏览器

具体说明

1.复制上面代码app

2.粘贴代码到HTML的</body>标签前 (靠近HTML文件底部)async

3.修改“defer.js”为你的外部JS文件名工具

4.确保你文件路径是正确的。例如：若是你仅输入“defer.js”，那么“defer.js”文件必定与HTML文件在同一文件夹下。测试

这段代码能用在哪里(和哪里不能用)

这段代码直到文档加载完才会加载指定的外部JS文件。所以，不该该把那些页面正常加载须要依赖的javascript代码放在这里。而应该将JavaScript代码分红两组。一组是因页面须要而当即加载的javascript代码，另一组是在页面加载后进行操做的javascript代码(例如添加click事件或其余东西)。这些需等到页面加载后再执行的JavaScript代码，应放在一个外部文件，而后再引进来。

例如，在这页面我使用上述文件进行延迟加载 - Google analytics，Viglink (我怎么赚钱)，和显示在底部的Google+徽章(个人社交媒体)。这对于我来讲，没有理由在初始页面加载时加载这些文件，由于初始阶段都不必加载上述可有可无的内容。也许在你的页面中也有一样性质的文件。那你难道想让用户在看到网页内容以前，还要等待这些文件加载吗？

为何不使用其它方法呢？

直接插入代码、将脚本放置在底部和使用“defer”或“async”，这几种方法都不能达到先加载页面后加载JS的目的，并且它们确定不能在各个浏览器上表现一致。

它为何重要？

它的重要性是因为Google将页面速度做为排名因素之一并且用户也但愿能快速加载页面。另外对于移动搜索引擎优化也是很是重要的。Google根据页面最初加载时间来衡量页面速度。这意味着你必须尽量快地获得页面的load事件。页面最初加载时间是Google用来评价你的web页面质量(并且别忘记用户在等待页面的加载)。Google积极推动和推荐将上述的可有可无的内容按重要性排列，让全部资源(js,css,images等)脱离关键的渲染路径，并且这样作是值得去努力的。若是这样能取悦用户，且让Google开心，你很应该这样作。

用法示例

我已建立一个页面，在这个页面你可看到这段代码的使用。

让你测试的示例文件

好的，为了说明，我已制做几个示例页面让你进行测试。每一个页面都作同同样的事情。这是一个普通的HTML页面，含有一个等待2秒而后输出“hello world”的javascript脚本。你能够测试这些文件，而后你会看到只有一种方法，它的加载时间是不包括2秒的等待时间。

直接插入脚本的页面 – 点击这里
带有使用“defer”外部脚本的页面 – 点击这里
使用上述推荐代码的页面 – 点击这里

关键点

压倒一切的首要任务应该是尽量快地交付内容给用户。而咱们一直没想着如何对待咱们的javascript代码。但用户不该该为一些可有可无的脚本，而被迫地为内容而做出等待。不管你的页脚多酷，都没理由让一个可能从不滚动到页脚的用户，去加载那些让页脚变酷的javascript文件。