JS延迟加载的几种方法

布满荆棘的人生 2022-05-28 01:45 297阅读 0赞

首先来介绍一下<script>时能让脚本延迟和异步执行的两个属性：defer和async。

## Defer、Async属性 ##

*  defer是html4.0中定义的，该属性使得浏览器能延迟脚本的执行，等文档完成解析完成后会按照他们在文档出现顺序再去下载解析。也就是说defer属性的<script>就类似于将<script>放在body的效果。
 *  async是HTML5新增的属性，IE10和浏览器都是支持该属性的。该属性的作用是让脚本能异步加载，也就是说当浏览器遇到async属性的<script>时浏览器加载css一样是异步加载的。

支持async属性的浏览器貌似没什么问题，但是defer属性在各个浏览器中支持程度有点不同。测试代码如下

延迟加载javascript，也就是页面加载完成之后再加载javascript，也叫on demand（按需）加载，一般有一下几个方法：

1. DOM

head append script tag

**\[javascript\]**  [view plain][]  [copy][view plain]

1.  window.onload = function () \{  
2.      setTimeout(function () \{  
3.    
4.          // reference to <head>    
5.          var head = document.getElementsByTagName('head')\[0\];  
6.    
7.          // a new CSS    
8.          var css = document.createElement('link');  
9.          css.type = "text/css";  
10.         css.rel = "stylesheet";  
11.         css.href = "new.css";  
12.   
13.         // a new JS    
14.         var js = document.createElement("script");  
15.         js.type = "text/javascript";  
16.         js.src = "new.js";  
17.   
18.         // preload JS and CSS    
19.         head.appendChild(css);  
20.         head.appendChild(js);  
21.   
22.         // preload image    
23.         new Image().src = "new.png";  
24.   
25.     \}, 1000);  
26. \};

2. document.write

**\[javascript\]**  [view plain][]  [copy][view plain]

1.  <script language="javascript" type="text/javascript">    
2.      function include(script\_filename) \{    
3.          document.write('<' + 'script');    
4.          document.write(' language="javascript"');    
5.          document.write(' type="text/javascript"');    
6.          document.write(' src="' + script\_filename + '">');    
7.          document.write('</' + 'script' + '>');    
8.      \}    
9.          
10.     var which\_script = '1.js';    
11.     include(which\_script);    
12. </script>

3. Iframe

和第一种类似，但是script tag是放到iframe的document里面。

**\[javascript\]**  [view plain][]  [copy][view plain]

1.  window.onload = function () \{  
2.      setTimeout(function () \{  
3.    
4.          // create new iframe    
5.          var iframe = document.createElement('iframe');  
6.          iframe.setAttribute("width", "0");  
7.          iframe.setAttribute("height", "0");  
8.          iframe.setAttribute("frameborder", "0");  
9.          iframe.setAttribute("name", "preload");  
10.         iframe.id = "preload";  
11.         iframe.src = "about:blank";  
12.         document.body.appendChild(iframe);  
13.   
14.         // gymnastics to get reference to the iframe document    
15.         iframe = document.all ? document.all.preload.contentWindow : window.frames.preload;  
16.         var doc = iframe.document;  
17.         doc.open(); doc.writeln("<html><body></body></html>"); doc.close();  
18.   
19.         // create CSS    
20.         var css = doc.createElement('link');  
21.         css.type = "text/css";  
22.         css.rel = "stylesheet";  
23.         css.href = "new.css";  
24.   
25.         // create JS    
26.         var js = doc.createElement("script");  
27.         js.type = "text/javascript";  
28.         js.src = "new.js";  
29.   
30.         // preload CSS and JS    
31.         doc.body.appendChild(css);  
32.         doc.body.appendChild(js);  
33.   
34.         // preload IMG    
35.         new Image().src = "new.png";  
36.   
37.     \}, 1000);  
38. \};

4. Iframe static page

直接把需要加载东西放到另一个页面中

**\[javascript\]**  [view plain][]  [copy][view plain]

1.  window.onload = function () \{  
2.      setTimeout(function () \{  
3.    
4.          // create a new frame and point to the URL of the static    
5.          // page that has all components to preload    
6.          var iframe = document.createElement('iframe');  
7.          iframe.setAttribute("width", "0");  
8.          iframe.setAttribute("height", "0");  
9.          iframe.setAttribute("frameborder", "0");  
10.         iframe.src = "preloader.html";  
11.         document.body.appendChild(iframe);  
12.   
13.     \}, 1000);  
14. \};

5. Ajax eval

用ajax下载代码，然后用eval执行

6. Ajax Injection

用ajax下载代码，建立一个空的script tag，设置text属性为下载的代码

7. async 属性(缺点是不能控制加载的顺序)

HTML5 为 `<script>`标签定义了 `async`属性。与`defer`属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。   
目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。

异步脚本一定会在页面 load 事件前执行。   
不能保证脚本会按顺序执行。

<!DOCTYPE html>
    <html>
    <head>
        <script src="test1.js" async></script>
        <script src="test2.js" async></script>
    </head>
    <body>
    
    </body>
    </html>

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

**让JS最后加载**

把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度

参考：

http://www.phpied.com/the-art-and-craft-of-postload-preloads/

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

转自：http://www.cnblogs.com/human/archive/2013/11/12/3419724.html

[view plain]: https://blog.csdn.net/dragoo1/article/details/48155501#