高性能 js -- 无阻塞加载脚本

参考: <<高性能JavaScript>> Nicbolas C. Zakas 著

javascript代码的下载和执行过程会阻塞浏览器的其他进程, 比如页面的绘制, 遇到<script>标签的时候都必须停下来等待代码的下载并执行. 然后才继续处理其他部分.

无阻塞加载javascript代码的推荐方式:

 // 将下面的这段加载代码放到</body>的闭合标签之前,这样确保了JS执行过程中不会阻碍页面的其他
 // 内容显示, 其次第二个js文件完成下载时, 应用所需要的DOM结构已经创建完成, 并做好了交互的准备,
 // 从而可以避免检测 winodw.onload事件.  (注: loader.js中存放的是loadScript()的实现)
 <script type="text/javascript" src="loader.js"></script>
 <script type="text/javascript">
     loadScript("the-rest.js",function(){
         app.init();
     });
 </script>

也可以将loadScript 直接嵌入页面, 从而避免多产生一次HTTP请求

 function loadScript(url,callback){
     var script = document.createElement("script");
     script.type = "text/javascript";
     if(script.readyState){//for IE
         script.onreadystatechange = function(){
             if(script.readyState == "onload" ||
                script.readyState == "complete"){
                 script.onreadystatechange = null; //删除事件处理器, 避免重复调用,IE自身的问题
                 callback();
             }
         }
     }else{ // for other browser,<script>标签的onload事件.
         script.onload = function(){
             callback();
         };
     }
     script.src = url;
     document.getElementByTagName("head")[0].appendChild(script);
 }

如果需要按照顺序下载js文件,可以这样调用loadScript. 更好的方式是按顺序放到一个文件中, 避免多次HTTP请求.

 // load in order, but better way is write all script in one file in order.
 loadScript("file1.js",function(){
     loadScript("file2.js",function(){
         loadScript("file3.js",function(){
             console.log("All files are loaded in order!");
         });
     });
 });

其他无阻塞模式:

1. 使用defer: 很多浏览器目前不支持(包括chrome)

　　-----  当一个带有defer属性的js文件下载时, 不会阻塞浏览器的其他进程; 无论是内嵌的还是外联的defer的js脚本, 在DOM加载完成之前都不会被执行.

2. 动态脚本元素: 返回的代码通常会立即执行, 在代码包含其他接口调用时会带来问题(可以跟踪<script>节点的onload或readystatechange事件).

　　-----  文件在元素被添加到页面时开始下载; 无论在何时启动下载和执行过程不会阻塞页面其他进程, 推荐 append 到 head 下面.

 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src = "file1.js";
 document.getElementByTagName("head")[0].appendChild(script);

3. 使用XMLHttpRequest

　　-----  代码是在<script> 标签之外返回的(xhr的open), 下载之后不会立即执行. 浏览器兼容性好. 但是必须要求js文件与页面处于同一个域中.

4. 使用第三方库

　　-----  LazyLoad:   loadScript()的增强版本

 <script type="text/javascript" src="lazyload-min.js"></script>
 <script type="text/javascript">
     LazyLoad.js(['first-file.js','second-file.js'],function(){
         Application.init();
     });
 </script>

　　-----  LABjs  :  提供对加载过程的更精细的控制, 并试图下载尽可能多的代码

 <script type="text/javascript" src="lab.js"></script>
 <script type="text/javascript">
     $LAB.script("first-file.js").wait()   //wait在这里保证按序执行
         .script('the-rest-files.js')
         .wait(function(){ // 下载完成后执行的函数
             Application.init();
         });
 </script>