高性能javascript筆記

javascript加載和運行

1. 腳本位置

儘管瀏覽器已經容許並行下載javascript文件，可是javascript下載過程仍然會阻塞其餘資源的下載，如圖片。頁面仍然須要等待全部javascript代碼下載並執行完成才能繼續因此優化javascript的首要原則：將腳本放在底部（</body>以前)

2. 組織腳本

每一個<script>標籤初始下載都會阻塞頁面渲染，因此減小頁面包含的<script>標籤數量有助於改善這一狀況。考慮到到HTTP請求會額外帶來性能的開銷。下載單個100B的文件比下載4個25B的文件更快。因此，減小頁面中外鏈腳本文件的數量會改善性能。

3. 無阻塞的腳本

• 延遲的腳本：帶有defer屬性的<script>標籤，須要瀏覽器支持
• 動態腳本元素:在跨瀏覽器兼容性和易用的優點，是最通用的無阻塞加載解決方案

• XMLHttpRequest注入：先建立一個XHR對象，而後用她下載javascript文件，最後經過建立動態<script>元素將代碼注入頁面中

  var xhr = new XMLHttpRequest();
    xhr.open("get","file.js",true);
    xhr.onreadystatechange = funtion(){
         if(xhr.readyState == 4){
              if(xhr.status>=200&&xhr.status<300||xhr.status==304){
                   var script = document.creatElement("script");
                   script.type="text/javascript";
                   script.text=xhr.responseText;
                   document.body.appendChild(script);
                   }
              }    
    };
    xhr.send(null);
    //因爲代碼是在<script>標籤以前返回的，所以它下載後不會自動執行。
    //一樣的代碼在全部主流瀏覽器中無一例外都能正常工做
    //侷限性在於：javascript文件必須與請求的頁面處於相同的域，即javascript不能從CDN下載

4. 無阻塞腳本加載工具

lazyLoad類庫、LABjs等等

管理做用域

1. 做用域鏈和標識符解析

在函數執行的過程當中，沒遇到一個變量，都會經歷一次標識符解析過程以決定從哪裏獲取或存儲數據。該過程搜索運行期上下文的做用域鏈，查找同名的標識符。搜索過程從做用域鏈頭部開始也就是當前運行函數的活動對象，若是找到了，就使用這個標示符對應的變量；若是沒有找到，繼續搜索做用域鏈中的下一個對象，直到標識符被找到，或者沒有可用於搜索的對象爲止，這種狀況下標識符被認爲是未定義的。正是這個搜索過程影響了性能。

2. 標識符解析的性能

一個標識符所在的位置越深，他的讀寫速度就越慢，所以讀寫局部變量老是最快的，而讀寫全局變量一般是最慢的。全局變量老是存在於運行期上下文做用域鏈的最末端，所以是最遠的。在沒有優化javascript引擎的瀏覽器中，儘可能使用局部變量，若是某個跨做用域的值在函數中被引用了屢次，就把他存儲到局部變量裏。

```
function initUI(){
     var doc = document,bd = doc.body,links = doc.getElementByTagName("a");
     var i = 0,len = links.length;
     while(i<len){
     update(links[i++]);
     }
     doc.getElementById("btn").onclick = function(){
     start();
     };
     bd.className = "active"
}
//首先將document對象引用存儲到局部變量doc中，全局變量的訪問減小，當有不少全局變量被反覆訪問時，這種方法對性能的改善是很明顯的。
```

3. 閉包，做用域和內存

將經常使用的跨做用域變量存儲在局部變量中，而後訪問局部變量嵌套的對象成員會明顯影響性能，儘可能少用
一般來講，把經常使用的對象成員、數組元素、跨域變量保存在局部變量中來改善javascript性能，由於局部變量訪問速度更快。

DOM

```
function initHtml1(){
     for(var i = 0;i<15000;i++){
     document.getElementById('here').innerHTML+='a';
     }
}

function initHtml2(){
     var html = "";
     for(var i=0;i<15000;i++){
     html+='a';
     }
     document.getElementById('here').innerHTML = html;
}
```

initHtml1()比initHtml2()速度慢不少，initHtml2()使用局部變量存儲更新後的內容，減小了DOM訪問，所以，減小DOM訪問次數，講運算儘可能留在ECMAScript這端處理。