js 延迟加载

发表于 | 阅读次数:

什么是 js 的延迟加载

js 的延迟加载就是等页面加载完毕后再加载 js 文件（这里尤指外部 jsvascript 文件）。采用延迟加载的好处就是有助于提升页面的加载速度。

js 的几种延迟加载方式

1. defer 属性

defer HTML4 为 <script> 标签添加的一个属性。布尔值 defer="defer"。
用途：被标记的脚本将在文档解析后，触发 DOMContentLoaded 事件前执行。脚本在执行时并不会影响页面的结构。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>

<html>
<head>
    <script src="01.js" defer="defer"></script>
    <script src="02.js" defer="defer"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

说明：虽然 <script> 元素放在了 <head> 元素中，但包含的脚本将在浏览器渲染到 </html> 标签后再执行。

HTML5 规范要求脚本按照它们出现的先后顺序执行。在现实当中，延迟脚本并不一定会按照顺序执行。

支持 HTML5 的实现会忽略嵌入脚本设置的 defer 属性。

如果缺少 src 属性（即内嵌脚本），该属性不应被使用，因为这种情况下它不起作用（defer 属性只适用于外部脚本文件。）。

对动态嵌入的脚本使用 async=false 来达到类似的效果

2. async 属性

HTML5 规定了 <script> 的 async 属性。布尔值 async=false。
允许浏览器异步执行脚本，页面 load 事件前执行，降低阻塞。同样对内联脚本无作用 (即没有src属性的脚本）。不能保证脚本会按顺序执行。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>

<html>
<head>
    <script src="01.js" async></script>
    <script src="02.js" async></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

async和defer一样，都不会阻塞其他资源下载，所以不会影响页面的加载。
缺点：不能控制加载的顺序

3. 动态创建DOM方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//这些代码应被放置在</body>标签前(接近HTML文件底部)

<script type="text/javascript">  
   function downloadJSAtOnload() {  
       varelement = 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>

4. 使用 jQuery 的 getScript() 方法

5. 使用 setTimeout 延迟方法

这个方法并 不靠谱 。因为 setTimeout 方法实际的出发时间并不一定是我们设置的延迟时间。这要根据页面渲染时的线程是否阻塞而决定。

6. 让JS最后加载

将 js 放在 </body> 闭合标签前，确保页面结构和样式渲染完毕后再执行脚本文件。

该方法目前比较常用。