高性能JavaScript（一）加载与执行

加载与执行

javascript在浏览器中的性能问题，是所有开发者必定会遇到的问题。javascript阻塞的特性，也就是当script标签出现时，页面的下载与渲染都会停下来等待脚本的下载与执行，只有脚本执行结束后，才会继续页面的加载。如果javascript的下载和执行时间过长的话，对用户的体验是非常差的。所以在这里列举几种方法来减少javascript对性能的影响：

1. 将script标签放在页面的最底部，确保执行脚本前页面已渲染完成。

2. 合并脚本，页面中script标签越少，加载就越快，响应越迅速。（浏览器下载单个100k文件比4个25k文件更快）。

3. 无阻塞脚本
   1). defer
   当解析到带defer的script标签时，会下载脚本文件，但是不会执行，等到DOM加载完成（onload事件被触发前）执行。（defer只有IE 4+和firefox 3.5+支持，其他浏览器会直接忽略该属性）
   2). 动态脚本添加（最通用的无阻塞加载解决方案）

   function loadScript (url, callback) {
       var script = document.createElement("script");
       script.type = "text/javascript";
   
       if(script.readyState) {
           script.onreadystatechange = function () {  //兼容IE
               if(script.readyState == "loaded" || script.readyState == "complete") {
                   script.onreadystatechange = null;
                   callback();
               }
           }
       } else {  
           script.onload = function () {
               callback();
           }
       }
   
       script.src = url;
       document.getElementsByTagName("head")[0].appendChild(script);
   }  
   

   3). XMLHttpRequest脚本注入

   var xhr = new XMLHttpRequest();
   xhr.open('GET', "./test.js", true);
   xhr.onreadystatechange = function () {
       if(xhr.readyState == 4) {
           if(xhr.status == 200 || xhr.status == 304) {
               var script = document.createElement("script");
               script.type = "text/javascript";
               script.text = xhr.responseText;
               document.body.appendChild(script);
           }
       }
   }
   xhr.send(null);
   

   该方法的优点：1. 下载后不会立即执行，脚本的执行会推迟到你准备好的时候。2. 兼容性很好，所有主流浏览器中都可以使用。

   该方法的缺点：JavaScript和所请求的页面处在相同的域中，这也就意味着不能从CDN下载文件。

通过以上的策略，会极大的提升JavaScript在实际中的形能。