JavaScript效能最佳化

標籤：方法   cte   代碼   clone   延遲   tar   var   ntb   瀏覽器   

1. 最佳化頁面載入時間
   • HTML標籤順序：把所有能夠移動的<script>標籤挪至HTML的</body>前。
   • JavaScript檔案的GZip編碼傳輸
   • 縮編、混淆和編譯，使用工具進行代碼的精簡和最佳化
   • 請求時才消極式載入JavaScript檔案
2. 最佳化文檔對象的操作
   • 實現對頁面元素的最小化訪問
     • 以變數儲存對DOM元素的引用以便後續使用
     • 通過對單獨父元素的引用來訪問子DOM元素

     • var wrapper = document。getElementById("wrapper"),      header = wrapper.getElementByTagName("header")[0],      nav = wrapper.getElementByTagName("nav")[0];

       View Code
     • 對建立元素實施DOM修改操作後才將其添加當前即時頁面

     • var list = document.createElement("ul"),item = document.createElement("li");item.innerHTML="this is a list item";list.appendChild(item);document.body.appendChild(list);

       View Code　　　　　　

1. • 盡量利用已有的元素
     • 如果是建立多個有著相似標籤特性的元素，可以使用DOM元素的cloneNode()方法來複製該元素及相關特性，減少標準的document.createElement()方法來建立元素。
   • 離線DOM的利用
   使用CSS而非JavaScript來操控頁面樣式，減少在瀏覽器引發重排的次數

   • //示範當直接更新DOM元素的Style屬性時所引發的重排    var nav =document.getElementByTagName("nav");    nav.style.backgroundColor = "#000";//在瀏覽器中引發一次重排    nav.style.color = "#fff";//引發一次重排    nav.style.opacity = 0.5;//引發一次重排

     View Code

     //應用CSS類至DOM元素以減少瀏覽器重排    var nav = document.getElementByTagName("nav");    nav.className="selected";//名稱為selected的CSS類中包含著多項樣式

     View Code

     //隱藏元素並修改元素的style屬性，以此來減少瀏覽器重排的發生    var nav = document.getElementByTagName("nav");    nav.style.display = "none";//隱藏元素，引發一次瀏覽器重排    nav.style.backgroundColor = "#000";//因為元素已隱匿，不會引發重排    nav.style.color = "#fff";//不會引發瀏覽器重排    nav.style.opacity = 0.5;//不會引發瀏覽器重排    nav.style.display = "block";//使該元素重新顯示，引發一次瀏覽器重排

     View Code
2. 提升DOM事件效能
   • 委託事件至父元素
   • 使用架構化處理頻發的事件

 

JavaScript效能最佳化