关于延迟加载JavaScript

当一个网站有很多js代码要加载，js代码放置的位置在一定程度上将会影像网页的加载速度，为了让我们的网页加载速度更快，本文总结了一下几个注意点，分享给大家

 

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

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

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

如何延迟加载JavaScript

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

1. <script type="text/javascript"> 
2. function downloadJSAtOnload() { 
3. var element = document.createElement("script"); 
4. element.src = "defer.js"; 
5. document.body.appendChild(element); 
6. } 
7. if (window.addEventListener) 
8. window.addEventListener("load", downloadJSAtOnload, false); 
9. else if (window.attachEvent) 
10. window.attachEvent("onload", downloadJSAtOnload); 
11. else window.onload = downloadJSAtOnload; 
12. </script>