Javascript執行效率小結

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

Javascript自身執行效率

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

1、全局導入

我們在編碼過程中多多少少會使用到一些全局變量（window,document,自定義全局變量等等），了解javascript作用域鍊的人都知道，在局部作用域中通路全局變量需要一層一層周遊整個作用域鍊直至頂級作用域，而局部變量的通路效率則會更快更高，是以在局部作用域中高頻率使用一些全局對象時可以将其導入到局部作用域中，例如：

1 //1、作為參數傳入子產品

2 (function(window,$){

3     var xxx = window.xxx;

4     $("#xxx1").xxx();

5     $("#xxx2").xxx();

6 })(window,jQuery);

7

8 //2、暫存到局部變量

9 function(){

10     var doc = document;

11     var global = window.global;

12 }

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變量的值，是以，在閉包傳回前我們可以将其它變量釋放

    //閉包傳回前釋放掉不再使用的變量

    b = c = null;

        }

Js操作dom的效率

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

1、減少reflow

什麼是reflow？

當 DOM 元素的屬性發生變化 (如 color) 時, 浏覽器會通知 render 重新描繪相應的元素, 此過程稱為 repaint。

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

減少reflow的方法

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

例如

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

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

    child.innerHtml = "child";

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

}

上述代碼會多次操作dom，效率比較低，可以改為下面的形式 建立documentFragment，将所有元素加入到docuemntFragment不會改變dom結構，最後将其添加到頁面，隻進行了一次reflow

var frag = document.createDocumentFragment();

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

        child.innerHtml = "child";

    frag.appendChild(child);

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

2、暫存dom狀态資訊

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

var lis = document.getElementByTagName("li");

for(var i=1;i<lis.length;i++){

    //***

上述方式會在每一次循環都去通路dom元素，我們可以簡單将代碼優化如下

for(var i=1,j=lis.length ;i<j;i++){

3、縮小選擇器的查找範圍

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

• 少用模糊比對的選擇器：例如

  $("[name*='_fix']")

  ，多用諸如id以及逐漸縮小範圍的複合選擇器

  $("li.active")

  等
• 指定上下文：例如

  $("#parent .class")

  ，

  $(".class",$el)

4、使用事件委托

使用場景：一個有大量記錄的清單，每條記錄都需要綁定點選事件，在滑鼠點選後實作某些功能，我們通常的做法是給每條記錄都綁定監聽事件，這種做法會導緻頁面會有大量的事件監聽器，效率比較低下。

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

$("ul li").bind("click",function(){

    alert($(this).attr("data"));

})

上述寫法其實是給所有的li元素都綁定了click事件來監聽滑鼠點選每一個元素的事件，這樣頁面上會有大量的事件監聽器。

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

$("ul").bind("click",function(e){

    if(e.target.nodeName.toLowerCase() ==="li"){

        alert($(e.target).attr("data"));

這樣一來，我們就可以隻添加一個事件監聽器去捕獲所有li上觸發的事件，并做出相應的操作。

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

文法是這樣的

$(selector).delegate(childSelector,event,data,function)

，例如：

$("div").delegate("button","click",function(){

  $("p").slideToggle();

});

參數說明（引自w3school）      

參數	描述
childSelector	必需。規定要附加事件處理程式的一個或多個子元素。
event	必需。規定附加到元素的一個或多個事件。由空格分隔多個事件值。必須是有效的事件。
data	可選。規定傳遞到函數的額外資料。
function	必需。規定當事件發生時運作的函數。

Tips:事件委托還有一個好處就是，即使在事件綁定之後動态添加的元素上觸發的事件同樣可以監聽到哦，這樣就不用在每次動态加入元素到頁面後都為其綁定事件了