性能優化之資料存儲&DOM程式設計

資料存儲

·在javascript中，資料存儲的位置會對代碼整體性能産生重大的影響。

·資料存儲共有4種方式：字面量、變量、數組、對象成員。  

·要了解變量的通路速度，就要了解作用域。由于局部變量處于作用域的起始位置，是以通路速度比通路跨域作用域變量(即除起始位置之外的外層作用域變量)更快。即變量處在作用域的位置越深，通路速度越慢。這也就說明，通路全局變量的速度是最慢的。 總的來說，字面量和局部變量的通路速度快于數組和對象成員的通路速度。

是以，常見的一些提高資料通路速度的方法有：

①避免使用with、try-catch中的catch語句，因為它會改變執行環境的作用域鍊。

②盡量少用嵌套對象、避免對象嵌套過深。

③可以把常需要通路的對象成員、數組項、跨域變量儲存在局部變量中。

DOM程式設計

     我們知道用javascript操作DOM會影響性能，這是為什呢。這個問題是“天生”的。

因為DOM是一個獨立于語言的，用于操作XML和HTML文檔的程式接口，而用戶端腳本程式設計大多數時候是和底層文檔打交道。是以推薦的做法就是盡可能少操作DOM。

有這麼一些小技巧：

①如果需要多次通路某個DOM節點，使用局部變量存儲它的引用。

②小心處理HTML集合，因為它實時聯系着底層文檔。

例如：

<code>var</code> <code>divs= document.getElementsByTagName(</code><code>'div'</code><code>);</code>

<code>for</code><code>(</code><code>var</code> <code>i = 0;i &lt; divs.length; i++){</code>

<code>    </code><code>document.body.appendChild(document.creatElement(</code><code>'div'</code><code>))</code>

<code>}</code>

這是一個死循環，原因就是divs.length每次疊代都會增加，它反映的是底層文檔的目前狀态。

是以，我們在需要周遊某個HTML集合的時候，可以先把長度緩存起來再使用。而如果是要經常操作的集合，可以把整個集合拷貝到一個數組中。

③使用一些速度更快的API

childNodes -&gt; children

childElementCount -&gt; childNodes.length

firstElementChild -&gt; firstChild

lastElementChild -&gt; last Child

getElementByTagName  -&gt;querySelectorAll

④注意重繪和重排

1.由于每次重排都會産生計算消耗，大多數浏覽器通過隊列化修改并批量執行來優化重排過程。

而擷取布局資訊的操作會導緻隊列重新整理，如下方法：

offsetTop,offsetLeft,offsetWidth,offsetHeight、

scrollTop,scrollLeft,scrollWidth,scrollHeight、

clientTop,clientLeft,clientWidth,clientHeight、

getComputedStyle

因為這些屬性或方法需要傳回最新的布局資訊，是以浏覽器不得不執行渲染列隊中的“待處理變化”并觸發重排以傳回正确的值。

2.最小化重繪和重排，合并多次對DOM和樣式的修改，如

<code>var</code> <code>el = document.getElementById(</code><code>'mydiv'</code><code>);</code>

<code>el.style.margin = </code><code>'5px'</code><code>;</code>

<code>el.style.padding = </code><code>'2px'</code><code>;</code>

<code>el.style.borderLeft= </code><code>'5px'</code><code>;</code>

以上，修改了三個樣式，每個都會影響元素的幾何結構，最糟糕的情況下會導緻三次重排(大部分現代浏覽器為此做了優化，隻會觸發一次)

可以被優化為：

<code>el.style.cssText = </code><code>'margin = '</code><code>5px</code><code>';padding = '</code><code>2px</code><code>';borderLeft= '</code><code>5px';</code>

3.需要對DOM元素進行一系列操作時，可以通過以下步驟：

1）使元素脫離文檔流

2）對其應用多重改變

3）把元素帶回文檔中

具體方法有

     ·隐藏元素、應用修改、重新顯示

     ·使用文檔片段，在别的地方建構一個子樹，再把它拷貝回文檔

     ·将原始元素拷貝到一個脫離文檔的節點，修改後再替換原始元素

⑤動畫中使用絕對定位，使用拖放代理。

⑥使用事件委托來減少事件處理器的數量。

本文轉自帥氣的頭頭部落格51CTO部落格，原文連結http://blog.51cto.com/12902932/1924612如需轉載請自行聯系原作者

sshpp