您现在的位置： Linux教程網 >> UnixLinux > >> Linux編程 >> Linux編程

前端性能優化

緩存DOM對象

JavaScript的DOM操作可以說是JavaScript最重要的功能，我們經常要根據用戶的操作來動態的增加和刪除元素，或是通過AJAX返回的數據動態生成元素。比如我們獲得了一個很多元素的數組data[]，需要將其每個值生成一個li元素插入到一個id為container的ul元素中，最簡單（最慢）的方式是：

var liNode, i, m;
for (i = 0, m = data.length; i < m; i++) {
    liNode = document.createElement("li");
    liNode.innerText = data[i];
    document.getElementById("container").appendChild(liNode);
}

這裡每一次循環都會去查找id為container的元素，效率自然非常低，所以我們需要將元素在循環前查詢完畢，在循環中僅僅是引用就行了，修改代碼為：

var ulNode = document.getElementById("container");
var liNode, i, m;
for (i = 0, m = data.length; i < m; i++) {
    liNode = document.createElement("li");
    liNode.innerText = data[i];
    ulNode.appendChild(liNode);
}

緩存DOM對象的方式也經常被用在元素的查找中，查找元素應該是DOM操作中最頻繁的操作了，其效率優化也是大頭。在一般情況下，我們會根據需要，將一些頻繁被查找的元素緩存起來，在查找它或查找它的子孫元素時，以它為起點進行查找，就能提高查找效率了。

在內存中操作元素

由於DOM操作會導致浏覽器的回流，回流需要花費大量的時間進行樣式計算和節點重繪與渲染，所以應當盡量減少回流次數。一種可靠的方法就是加入元素時不要修改頁面上已經存在的元素，而是在內存中的節點進行大量的操作，最後再一並將修改運用到頁面上。DOM操作本身提供一個創建內存節點片段的功能:document.createDocumentFragment()，我們可以將其運用於上述代碼中：

var ulNode = document.getElementById("container");
var liNode, i, m;
var fragment = document.createDocumentFragment();
for (i = 0, m = data.length; i < m; i++) {
    liNode = document.createElement("li");
    liNode.innerText = data[i];
    fragment.appendChild(liNode);
}
ulNode.appendChild(fragment);

這樣就只會觸發一次回流，效率會得到很大的提升。如果需要對一個元素進行復雜的操作（刪減、添加子節點），那麼我們應當先將元素從頁面中移除，然後再對其進行操作，或者將其復制一個（cloneNode()），在內存中進行操作後再替換原來的節點

一次性DOM節點生成

在這裡我們每次都需要生成節點（document.createElement("li")），然後將其加入到內存片段中，我們可以通過innerHTML屬性來一次性生成節點，具體的思路就是使用字符串拼接的方式，先生成相應的HTML字符串，最後一次性寫入到ul的innerHTML中。修改代碼為：

var ulNode = document.getElementById("container");
var fragmentHtml = "", i, m;
for (i = 0, m = data.length; i < m; i++) {
    fragmentHtml += "<li>" + data[i] + "</li>";
}
ulNode.innerHTML = fragmentHtml;

這樣效率也會有提升，不過手動拼寫字符串是相當麻煩的一件事

通過類修改樣式

有時候我們需要通過JavaScript給元素增加樣式，比如如下代碼：

element.style.fontWeight = 'bold';
element.style.backgroundImage = 'url(back.gif)';
element.style.backgroundColor = 'white';
element.style.color = 'white';
//...

這樣效率很低，每次修改style屬性後都會觸發元素的重繪，如果修改了的屬性涉及大小和位置，將會導致回流。所以我們應當盡量避免多次為一個元素設置style屬性，應當通過給其添加新的CSS類，來修改其CSS

.element {
    background-image: url(back.gif);
    background-color: #fff;
    color: #fff;
    font-weight: 'bold';
    /*...*/
}

element.className += " element";

通過事件代理批量操作事件

還是之前那個ul和添加li，如果我們需要給每個li都綁定一個click事件，就可能寫出類似如下代碼：

var ulNode = document.getElementById("container");
var fragment = document.createDocumentFragment();
var liNode, i, m;
var liFnCb = function(evt){
    //do something
};
for (i = 0, m = data.length; i < m; i++) {
    liNode = document.createElement("li");
    liNode.innerText = data[i];
    liNode.addEventListener("click", liFnCb, false);
    fragment.appendChild(liNode);
}
ulNode.appendChild(fragment);

這裡每個li元素都需要執行一次addEventListener()方法，如果li元素數量一多，就會降低效率。所以我們可以通過事件代理的方式，將事件綁定在ul上，然後通過event.target來確定被點擊的元素是否是li元素，同時我們也可以使用innerHTML屬性一次性創建節點了，修改代碼為：

var ulNode = document.getElementById("container");
var fragmentHtml = "", i, m;
var liFnCb = function(evt){
    //do something
};
for (i = 0, m = data.length; i < m; i++) {
    fragmentHtml += "<li>" + data[i] + "</li>";
}
ulNode.innerHTML = fragmentHtml;
ulNode.addEventListener("click", function(evt){
    if(evt.target.tagName.toLowerCase() === 'li') {
        liFnCb.call(evt.target, evt);
    }
}, false);

這樣事件綁定的代碼就只要執行一次，可以監聽所有li元素的事件了。當然如果需要移除事件回調函數，我們也不需要循環遍歷所有的li元素，只需要移除ul元素上的事件處理就行了

更多詳情見請繼續閱讀下一頁的精彩內容： http://www.linuxidc.com/Linux/2015-03/115202p2.htm

Linux編程