高效js

/**
高效 Javascript 編碼

Fast Loops
循環是大多數腳本最基本的一個部分，在大多數情況下，循環不會有任何效率問題。
但是，通過優化循環條件，還是可以讓循環運行的更快一些
看下面的幾個例子
*/

for(var i = 0 ; i < document.getElementsByTagName('tr').length ; i++){
    document.getElementsByTagName('tr')[i].className = "newclass";
    document.getElementsByTagName('tr')[i].style.color = "red";
    ...
}

var rows = document.getElementsByTagName("tr");
for(var i = 0 ; i < rows.length ; i++){
    rows[i].className = "newclass";
    rows[i].style.color = "red";
    ...
}
/*
上面兩個都不是高效的，getElementsByTagName返回一個動態的對象，而不是一個靜態的數組。
每次循環的時候，解析器都會再次檢查對象，並且需要重新計算出有多少對象被引用。
下面是一種好一些的方式來進行這種循環（下面的第一種通常是最好的方式）
*/

/**
這種寫法稍微有點不太好理解
這種方式的理解需要徹底的瞭解for循環
for循環有兩個分號，等於說可以傳3個參數
第一段實際上就是用來定義變量的
第二段實際上就是傳入一個表達式
第三段一般傳入的遞增或者遞減

我們需要仔細分析的第二段
只要是個表達式
我們平常使用的是i>1 , i< 100之類的
仔細看下，這種東西實際上返回的不是false就是true
所以，我們在這個地方傳入的是false或者true的boolean值就行了
而這段代碼裏面傳入的是
row = rows[i]
實際上判斷boolean值的就是row這個變量
只要變量row轉換爲boolean的時候爲true就繼續進行循環
而rows[i]的i超過一定大小之後rows[i]就是null
那麼row也是null，null轉換爲boolean值的時候就是==false
所以會停止循環，也就是循環判斷終止的條件
*/
var rows = document.getElementsByTagName("tr");
for(var i = 0 , row;row = rows[i];i++){
    row.className = 'newclass';
    row.style.color = 'color';
    ...
}

var rows = document.getElementsByTagName("tr");
for(var i = rows.length - 1; i > -1;i--){
    var row = rows[i];
    row.className = 'newclass';
    row.style.color = 'color';
    ...
}

/*這下面這一種是我們經常能看到的，雖然做了變量緩存，但是增加了一個不必要的變量m，增加了內存的使用量*/
var rows = document.getElementsByTagName("tr");
for(var i = 0 , m = rows.length; i < m;i++){
    var row = rows[i];
    row.className = 'newclass';
    row.style.color = 'color';
    ...
}

/*
Reduce reflow

每次我們添加一個元素到document中，瀏覽器必須重新reflow整個page，所有的元素都會被重新設置位置和渲染
你添加的元素次數越多，reflow的次數也就越多。
所以應該減少reflow的次數，這樣頁面的展現也就越快。
如果你需要添加一個新元素，並且這個元素有很多子節點。
應該先將子元素添加到新元素上面，然後纔將新元素append到頁面上
這樣只需要一次的reflow

但是有一種情況
就是你添加一個節點，並且需要給他新加一些相鄰節點
這種情況下可以新建一個fragment，然後將這些節點加入到fragment上面
最後將fragment添加到document中。
*/

/*
Assign multiple styles

我們通過js來修改元素的style的時候
經常會這麼寫
*/
oElement.style.position = "absolute";
oElement.style.top = "0px";
oElement.style.left = "0px";
...etc...

/*再看另外一種寫法*/
oElement.setAttribute("style","position:absolute;top:0px;left:0px;...etc...");

/*這種方式也可以將reflow的次數降低到一次*/