js 异步加载 延迟执行 插件

最近因工作的需要主要做web前段的优化，其中之一就是js的优化，在项目中的js代码相对比较规范的，都是$(function(){})这种格式。但是大家都知道js的下载比较耗时的，它的解析和执行是阻塞式的。我们是否可以先让js下载下来，在windows的load事件中在去解析和执行了。答案是肯定的，其中ControlJS .js就实现了这种方式。个人觉得它比LAB的延迟加载要优秀的一点，减少了js的加载时间。但是该js功能相对比较强大，同时也没有解决js依赖关系的加载。个人自己写了一个小插件 来实现js异步加载延迟执行。

代码如下：

 

Javascript代码 

1. (function () {  
2.     var document = window.document;  
3.     var getAttribute = function (elem, name) {  
4.         var attrs = elem.attributes;  
5.         var len = attrs.length;  
6.         for (var i = 0; i < len; i++) {  
7.             var attr = attrs[i];  
8.             if (name === attr.nodeName) {  
9.                 return attr.nodeValue;  
10.             }  
11.         }  
12.   
13.         return undefined;  
14.     };  
15.   
16.     var scriptsData;  
17.     var orders = [];  
18.     var findScripts = function () {  
19.         var aScripts = document.getElementsByTagName('script');  
20.         var len = aScripts.length;  
21.         var scriptsArr = [];  
22.         var scriptsSrc = [];  
23.   
24.         for (var i = 0; i < len; i++) {  
25.             var script = aScripts[i];  
26.             if ("text/asynjs" === getAttribute(script, "type") && "undefined" === typeof (script.founded)) {  
27.                 script.founded = true;  
28.                 var order = getAttribute(script, "order") || getAttribute(script, "data-order") || 0;  
29.                 script.order = order;  
30.                 if (orders.indexOf(order) < 0) {  
31.                     orders.push(order);  
32.                 }  
33.                 var src = getAttribute(script, "asynsrc") || getAttribute(script, "data-asynsrc");  
34.                 script.src = src;  
35.                 if (src && scriptsSrc.indexOf(src) < 0) {  
36.                     scriptsArr.push(script);  
37.                 }  
38.             }  
39.   
40.         }  
41.         orders.sort(function compare(a, b) { return a - b; });  
42.         return scriptsData = scriptsArr;  
43.     };  
44.     var downloadScripts = function (scriptArr) {  
45.         var scripts = scriptArr || findScripts();  
46.         var len = scripts.length;  
47.   
48.         for (var i = 0; i < len; i++) {  
49.             var img = new Image();  
50.             img.src = scripts[i].src;  
51.             img.style.display = "none";  
52.         }  
53.     };  
54.   
55.     var processScripts = function (scriptArr) {  
56.         var scripts = (scriptArr && scriptArr.constructor === Array) ? scriptArr : scriptsData;  
57.         var len = scripts.length;  
58.         var failscripts = [];  
59.         var wdata = [];  
60.         for (var i = orders.length - 1; i >= 0; i--) {  
61.             var order = orders[i];  
62.             var urls = [];  
63.             var fns = [];  
64.             for (var j = 0, len = scripts.length; j < len; j++) {  
65.                 var script = scripts[j];  
66.                 if (script.order == order) {  
67.                     urls.push(script.src);  
68.                 }  
69.             }  
70.             if (i == orders.length - 1) {  
71.                 wdata[order] = processScript(urls)  
72.             }  
73.             else {  
74.                 var nextorder = orders[i + 1];  
75.                 fns.push(wdata[nextorder]);  
76.                 wdata[order] = processScript(urls, fns);  
77.             }  
78.         }  
79.         var exorder = orders[0]  
80.         wdata[orders[0]]();  
81.     };  
82.     var processScript = function (urls, fn) {  
83.         return function () {  
84.             for (var i = 0; i < urls.length; i++) {  
85.                 var se = document.createElement('script');  
86.                 if (fn && fn[i]) {  
87.                     se.onload = se.onreadystatechange = fn[i];  
88.                 }  
89.                 se.src = urls[i];  
90.                 var s1 = document.getElementsByTagName('script')[0];  
91.                 s1.parentNode.insertBefore(se, s1);  
92.             }  
93.         }  
94.     }  
95.   
96.     if (document.addEventListener) {  
97.         document.addEventListener("DOMContentLoaded", function () { downloadScripts(); }, false);  
98.         window.addEventListener("load", function () { setTimeout(processScripts, 0); }, false);  
99.   
100.     } else if (document.attachEvent) {  
101.   
102.         document.attachEvent("onreadystatechange", function () { downloadScripts(); });  
103.         window.attachEvent("onload", function () { setTimeout(processScripts, 0); });  
104.     }  
105.   
106. })();  

调用代码：

 

 

Html代码 

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2. <html xmlns="http://www.w3.org/1999/xhtml">  
3. <head>  
4.  <title>test</title>  
5.  <script type="text/javascript" src="Scripts/asynload.js"></script>  
6. </head>  
7. <body>  
8.  <div id="container">  
9.  <img src="images/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">  
10.   
11.  <script type="text/asynjs" order="3" asynsrc="test.js"></script>  
12.  <script type="text/asynjs" order="1" asynsrc="Scripts/jquery-1.7.2.js"></script>  
13.  <script type="text/asynjs" order="2" asynsrc="Scripts/jquery.lazyload.js"></script>  
14.   
15.  <img src="images/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side" />  
16.  <img data-original="images/viper_1.jpg" width="765" height="574" alt="Viper 1" />  
17.  <img data-original="images/viper_corner.jpg" width="765" height="574" alt="Viper Corner" />  
18.  <img data-original="images/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT" />  
19.  <img data-original="images/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop" />  
20.  </div>  
21. </body>  
22. </html>  

其中jquery.lazyload.js是图片延迟加载的jquery插件。test.js的代码$(function () {$("img[data-original]").lazyload();});。