JavaScript性能優化

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事件性能
   • 委託事件至父元素
   • 使用框架化處理頻發的事件