前端性能優化（DOM操作篇）

BDEEFE 發布于2019-08-19 14:42 / 1228人閱讀

摘要：在內存中操作元素由于操作會導致瀏覽器的回流，回流需要花費大量的時間進行樣式計算和節點重繪與渲染，所以應當盡量減少回流次數。

正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~

小廣告：更多內容可以看我的博客

緩存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 += "" + data[i] + "";
}
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 += "" + data[i] + "";
}
ulNode.innerHTML = fragmentHtml;
ulNode.addEventListener("click", function(evt){
    if(evt.target.tagName.toLowerCase() === "li") {
        liFnCb.call(evt.target, evt);
    }
}, false);

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

GPU云服務器云服務器前端性能優化前端開發性能優化 Dom操作 dom對象操作

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78070.html

前端優化-Javascript篇(4.DOM優化)

摘要：優化策略跟上面的大同小異，就是用局部變量緩存集合以及集合的長度，我就不進行實際測試了。例如錯誤的做法使用修改來進行優化如果需要動態修改，那么就使用批量處理操作并且讓元素脫離文檔流，等操作結束后再放回文檔流中。上篇我介紹了Javascript標識符查找方面的優化，可以看出在這方面的優化給性能帶來的提升并不明顯，甚至可以說基本沒有影響。但是，我今天要分享的是前端Javascript優化的...

Prasanta 2019-08-21 12:21 評論0 收藏0
前端性能優化（DOM操作篇）

摘要：在內存中操作元素由于操作會導致瀏覽器的回流，回流需要花費大量的時間進行樣式計算和節點重繪與渲染，所以應當盡量減少回流次數。正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告：更多內容可以看我的博客緩存DOM對象 JavaScript的DOM操作可以說是JavaScript最重要的功能，我們經常要根據用戶的操作來動態的增加和刪除元素，或是通過...

baukh789 2019-08-01 14:38 評論0 收藏0
JS基礎篇--JS的DOM操作 - 你真的了解嗎?

摘要：摘要想稍微系統的說說對于的操作把和常用操作的內容歸納成思維導圖方便閱讀同時加入性能上的一些問題前言在前端開發的過程中極為重要的一個功能就是對對象的操作無論增刪改查在前端頁面操作這一范圍內都是比較消耗性能的如何高效率的便捷的操作這就是本文要講摘要想稍微系統的說說對于DOM的操作,把Javascript和jQuery常用操作DOM的內容歸納成思維導圖方便閱讀,同時加入性能上的一些問題....

DirtyMind 2019-08-22 10:59 評論0 收藏0
前端優化 - 收藏集 - 掘金

摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...

VincentFF 2019-08-20 17:15 評論0 收藏0
淺談網站性能之前端性能優化

摘要：淺談網站性能之前端性能優化性能優化的目的無非是減少用戶流量消耗，提升用戶首屏體驗，提升用戶訪問速度，讓用戶專注內容本身。前端性能優化減少請求數量基本原理在瀏覽器與服務器進行通信時，主要是通過進行通信。最近項目慢慢走上正軌，需求趨于平穩，這才想起需要對整站進行性能優化。經過一段時間的學習，結合現在項目的實際性能情況，發現確實有許多地方可以進行優化。于是就開始了我的前端性能優化之旅。以下...

Winer 2019-08-20 11:04 評論0 收藏0