JavaScript之性能優化

一、腳本應該放在頁面元素代碼之後

頁面的下載和渲染都必須停下來等待腳本執行完成。JavaScript 執行過程耗時越久，瀏覽器等待響應用戶輸入的時間就越長。瀏覽器在下載和執行腳本時出現阻塞的原因在於，腳本可能會改變頁面或JavaScript的命名空間，它們會對後面頁面內容造成影響。

二、避免全局查找

function search() {
 //當我要使用當前頁面地址和主機域名
    alert(window.location.href + window.location.host);
}
//最好的方式是如下這樣  先用一個簡單變量保存起來
function search() {
    var location = window.location;
    alert(location.href + location.host);
}

三、類型轉換

最好用”" + 1來將數字轉換成字符串，雖然看起來比較醜一點，但事實上這個效率是最高的，性能上來說：

var myVar = "3.14159",
    str = "" + myVar, //  轉換字符串  
    num=+myVar,       // 轉換數字
    i_int = ~ ~myVar,  //  轉換整數  
    f_float = 1 * myVar,  //  轉換浮點數 
    b_bool = !!myVar,  // 轉換布爾值
    array = [myVar];  //  轉換成數組

四、多個類型生命

在JavaScript中所有變量都可以使用單個var語句來聲明，這樣就是組合在一起的語句，以減少整個腳本的執行時間，就如上面代碼一樣，上面代碼格式也挺規範，讓人一看就明瞭。

五、通過模板元素clone，替代createElement

JavaScript中使用document.write來給頁面生成內容。事實上這樣的效率較低，如果需要直接插入HTML，可以找一個容器元素，比如指定一個div或者span，並設置他們的innerHTML來將自己的HTML代碼插入到頁面中。通常我們可能會使用字符串直接寫HTML來創建節點，其實這樣做，1：無法保證代碼的有效性，2：字符串操作效率低，所以應該是用document.createElement()方法，而如果文檔中存在現成的樣板節點，應該是用cloneNode()方法，因爲使用createElement()方法之後，你需要設置多次元素的屬性，使用cloneNode()則可以減少屬性的設置次數——同樣如果需要創建很多元素，應該先準備一個樣板節點。

var frag = document.createDocumentFragment();
    for (var i = 0; i < 1000; i++) {
        var el = document.createElement('p');
        el.innerHTML = i;
        frag.appendChild(el);
    }
    document.body.appendChild(frag);
    //替換爲：
    var frag = document.createDocumentFragment();
    var pEl = document.getElementsByTagName('p')[0];
    for (var i = 0; i < 1000; i++) {
        var el = pEl.cloneNode(false);
        el.innerHTML = i;
        frag.appendChild(el);
    }
    document.body.appendChild(frag);

六、慎用閉包

document.getElementById('foo').onclick = function(ev) { };

七、在循環時將控制條件和控制變量合併起來

for ( var x = 0; x < 10; x++ ) {};

當我們要添加什麼東西到這個循環之前，我們發現有幾個操作在每次迭代都會出現。JavaScript引擎需要： 1：檢查 x 是否存在 2：檢查 x 是否小於 10 3：使 x 增加 1

var x = 9;
do { } while( x-- );

八、避免與null進行比較

由於JavaScript是弱類型的，所以它不會做任何的自動類型檢查，所以如果看到與null進行比較的代碼，嘗試使用以下技術替換：
1、如果值應爲一個引用類型，使用instanceof操作符檢查其構造函數
2、如果值應爲一個基本類型，作用typeof檢查其類型
3、如果是希望對象包含某個特定的方法名，則使用typeof操作符確保指定名字的方法存在於對象上

九、尊重對象的所有權

因爲JavaScript可以在任何時候修改任意對象，這樣就可以以不可預計的方式覆寫默認的行爲，所以如果你不負責維護某個對象，它的對象或者它的方法，那麼你就不要對它進行修改，具體一點就是說：
1、不要爲實例或原型添加屬性
2、不要爲實例或者原型添加方法
3、不要重定義已經存在的方法
4、不要重複定義其它團隊成員已經實現的方法，永遠不要修改不是由你所有的對象，你可以通過以下方式爲對象創建新的功能:
1、創建包含所需功能的新對象，並用它與相關對象進行交互
2、創建自定義類型，繼承需要進行修改的類型，然後可以爲自定義類型添加額外功能

十、使用直接量

    var aTest = new Array(); //替換爲
    var aTest = [];
    var aTest = new Object; //替換爲
    var aTest = {};
    var reg = new RegExp(); //替換爲
    var reg = /../;
    //如果要創建具有一些特性的一般對象，也可以使用字面量，如下：
    var oFruit = new O;
    oFruit.color = "red";
    oFruit.name = "apple";
    //前面的代碼可用對象字面量來改寫成這樣：
    var oFruit = { color: "red", name: "apple" };

十一、釋放javascript對象

隨着實例化對象數量的增加，內存消耗會越來越大。所以應當及時釋放對對象的引用，讓GC能夠回收這些內存控件。 對象：obj = null 對象屬性：delete obj.myproperty 數組item：使用數組的splice方法釋放數組中不用的item

十二、巧用||和&&布爾運算符

function eventHandler(e) {
        if (!e) e = window.event;
    }
    //可以替換爲：
    function eventHandler(e) {
        e = e || window.event;
    }
    
    
    
    if (myobj) {
        doSomething(myobj);
    }
    //可以替換爲：
    myobj && doSomething(myobj);

十三、switch語句相對if較快