探尋Javascript執行效率問題_基礎知識

Javascript是一門非常靈活的語言，我們可以隨心所欲的書寫各種風格的代碼，不同風格的代碼也必然也會導致執行效率的差異，開發過程中零零散散地接觸到許多提高代碼效能的方法，整理一下平時比較常見並且容易規避的問題

　Javascript自身執行效率
　　Javascript中的範圍鏈、閉包、原型繼承、eval等特性，在提供各種神奇功能的同時也帶來了各種效率問題，用之不慎就會導致執行效率低下。

　　1、全域匯入
　　我們在編碼過程中多多少少會使用到一些全域變數（window,document,自訂全域變數等等），瞭解javascript範圍鏈的人都知道，在局部範圍中訪問全域變數需要一層一層遍曆整個範圍鏈直至頂級範圍，而局部變數的訪問效率則會更快更高，因此在局部範圍中高頻率使用一些全域對象時可以將其匯入到局部範圍中，例如：

複製代碼 代碼如下:

//1、作為參數傳入模組
 (function(window,$){
     var xxx = window.xxx;
     $("#xxx1").xxx();
     $("#xxx2").xxx();
 })(window,jQuery);
 
 //2、暫存到局部變數
 function(){
     var doc = document;
     var global = window.global;
 }
 

　　2、eval以及類eval問題
　　我們都知道eval可以將一段字串當做js代碼來執行處理，據說使用eval執行的代碼比不使用eval的代碼慢100倍以上（具體效率我沒有測試，有興趣同學可以測試一下）

JavaScript 代碼在執行前會進行類似“先行編譯”的操作：首先會建立一個當前執行環境下的使用中的物件，並將那些用 var 申明的變數設定為使用中的物件的屬性，但是此時這些變數的賦值都是 undefined，並將那些以 function 定義的函數也添加為使用中的物件的屬性，而且它們的值正是函數的定義。但是，如果你使用了“eval”，則“eval”中的代碼（實際上為字串）無法預先識別其上下文，無法被提前解析和最佳化，即無法進行先行編譯的操作。所以，其效能也會大幅度降低

　　其實現在大家一般都很少會用eval了，這裡我想說的是兩個類eval的情境(new Function{},setTimeout,setInterver)

複製代碼 代碼如下:

setTimtout("alert(1)",1000);
setInterver("alert(1)",1000);
(new Function("alert(1)"))();

　　上述幾種類型代碼執行效率都會比較低，因此建議直接傳入匿名方法、或者方法的引用給setTimeout方法

　　3、閉包結束後釋放掉不再被引用的變數

複製代碼 代碼如下:

var f = (function(){
    var a = {name:"var3"};
    var b = ["var1","var2"];
    var c = document.getElementByTagName("li");
    //****其它變數
    //***一些運算
    var res = function(){
        alert(a.name);
    }
    return res;
})()

　　上述代碼中變數f的傳回值是由一個立即執行函數構成的閉包中返回的方法res，該變數保留了對於這個閉包中所有變數（a,b,c等）的引用，因此這兩個變數會一直駐留在記憶體空間中,尤其是對於dom元素的引用對記憶體的消耗會很大，而我們在res中只使用到了a變數的值，因此，在閉包返回前我們可以將其它變數釋放

複製代碼 代碼如下:

var f = (function(){
    var a = {name:"var3"};
    var b = ["var1","var2"];
    var c = document.getElementByTagName("li");
    //****其它變數
    //***一些運算
    //閉包返回前釋放掉不再使用的變數
    b = c = null;
    var res = function(){
        alert(a.name);
        }
    return res;
})()

　Js操作dom的效率
　　在web開發過程中，前端執行效率的瓶頸往往都是在dom操作上面，dom操作是一件很耗效能的事情，如何才能在dom操作過程中盡量節約效能呢？

　　1、減少reflow
　　什麼是reflow？
當 DOM 元素的屬性發生變化 (如 color) 時, 瀏覽器會通知 render 重新描繪相應的元素, 此過程稱為 repaint。

如果該次變化涉及元素布局 (如 width), 瀏覽器則拋棄原有屬性, 重新計算並把結果傳遞給 render 以重新描繪頁面元素, 此過程稱為 reflow。

　　減少reflow的方法
先將元素從document中刪除，完成修改後再把元素放回原來的位置（當對某元素及其子項目進行大量reflow操作時，1,2兩種方法效果才會比較明顯）
將元素的display設定為”none”，完成修改後再把display修改為原來的值
修改多個樣式屬性時定義class類代替多次修改style屬性（for certain同學推薦）
大量添加元素到頁面時使用documentFragment
　　例如

複製代碼 代碼如下:

for(var i=0;i<100:i++){

    var child = docuemnt.createElement("li");

    child.innerHtml = "child";

    document.getElementById("parent").appendChild(child);

}

 
　　當代碼中需要多次訪問元素的狀態資訊，在狀態不變的情況下我們可以將其暫存到變數中，這樣可以避免多次訪問dom帶來記憶體的開銷，典型的例子就是：

　　尋找dom元素時盡量避免大面積遍曆頁面元素，盡量使用精準選取器，或者指定上下文以縮小尋找範圍，以jquery為例

少用模糊比對的選取器：例如$("[name*='_fix']")，多用諸如id以及逐步縮小範圍的複合選取器$("li.active")等
指定上下文：例如$("#parent .class")，$(".class",$el)等

　　4、使用事件委託
　　使用情境：一個有大量記錄的列表，每條記錄都需要綁定點擊事件，在滑鼠點擊後實現某些功能，我們通常的做法是給每條記錄都綁定監聽事件，這種做法會導致頁面會有大量的事件監聽器，效率比較低下。

　　基本原理：我們都知道dom規範中事件是會冒泡的，也就是說在不主動阻止事件冒泡的情況下任何一個元素的事件都會按照dom樹的結構逐級冒泡至頂端。而event對象中也提供了event.target（IE下是srcElement）指向事件來源，因此我們即使在父級元素上監聽該事件也可以找到觸發該事件的最原始的元素，這就是委託的基本原理。廢話不多說，上樣本

　　根據上面介紹的監聽事件的原理我們來改寫一下

　　當然，我們不必每次都做事件來源的判斷工作，可以將其抽象一下交給工具類來完成。jquery中的delegate()方法就實現了該功能

　　文法是這樣的$(selector).delegate(childSelector,event,data,function)，例如：

複製代碼 代碼如下:

$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

　　參數說明（引自w3school）
參數 描述
childSelector 必需。規定要附加事件處理常式的一個或多個子項目。
event 必需。規定附加到元素的一個或多個事件。由空格分隔多個事件值。必須是有效事件。
data 可選。規定傳遞到函數的額外資料。
function 必需。規定當事件發生時啟動並執行函數。
　　Tips:事件委託還有一個好處就是，即使在事件綁定之後動態添加的元素上觸發的事件同樣可以監聽到哦，這樣就不用在每次動態加入元素到頁面後都為其綁定事件了