核心問題

??? 當解析的html文件很大時，生成DOM樹占用內存較大，同時遍歷（不更新）元素耗時也更長。但這都不是重點，DOM的核心問題是：DOM修改導致的頁面重繪、重新排版！重新排版是用戶阻塞的操作，同時，如果頻繁重排，CPU使用率也會猛漲！

????DOM操作會導致一系列的重繪（repaint）、重新排版（reflow）操作。為了確保執行結果的準確性，所有的修改操作是按順序同步執行的。大部分瀏覽器都不會在JavaScript的執行過程中更新DOM。相應的，這些瀏覽器將對對 DOM的操作放進一個隊列，并在JavaScript腳本執行完畢以后按順序一次執行完畢。也就是說，在JavaScript執行的過程，直到發生重新排版，用戶一直被阻塞。

????一般的瀏覽器中（不含IE），repaint的速度遠快于reflow，所以避免reflow更重要。

????導致repaint、reflow的操作：

? ??* DOM元素的添加、修改（內容）、刪除( Reflow + Repaint)

??? * 僅修改DOM元素的字體顏色（只有Repaint，因為不需要調整布局）

??? * 應用新的樣式或者修改任何影響元素外觀的屬性

??? * Resize瀏覽器窗口、滾動頁面

??? * 讀取元素的某些屬性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))

?

?

Javascript的應對方案

?

【1】在DOM外，執行盡量多的變更操作。Demo

// 不好的做法 for (var i=0; i < items.length; i++){var item = document.createElement("li");item.appendChild(document.createTextNode("Option " + i);list.appendChild(item); }? ? // 更好的做法 // 使用容器存放臨時變更， 最后再一次性更新DOM var fragment = document.createDocumentFragment(); for (var i=0; i < items.length; i++){var item = document.createElement("li");item.appendChild(document.createTextNode("Option " + i);fragment.appendChild(item); } list.appendChild(fragment);

【2】操作DOM前，先把DOM節點刪除或隱藏，因為隱藏的節點不會觸發重排。Demo如下：

list.style.display = "none"; for (var i=0; i < items.length; i++){ var item = document.createElement("li"); item.appendChild(document.createTextNode("Option " + i); list.appendChild(item); } list.style.display = "";

? ? 【3】一次性，修改樣式屬性。Demo如下：

// 不好的做法 // 這種做法會觸發多次重排 element.style.backgroundColor = "blue"; element.style.color = "red"; element.style.fontSize = "12em"; // 更好的做法是，把樣式都放在一個class下 .newStyle { background-color: blue; color: red; font-size: 12em; } element.className = "newStyle";

? ? 【4】使用緩存，緩存臨時節點。

// 不好的做法 document.getElementById("myDiv").style.left = document.getElementById("myDiv").offsetLeft + document.getElementById("myDiv").offsetWidth + "px"; // 更好的做法 var myDiv = document.getElementById("myDiv"); myDiv.style.left = myDiv.offsetLeft + myDiv.offsetWidth + "px";

?

轉載于:https://www.cnblogs.com/hgonlywj/p/4852973.html

總結

以上是生活随笔為你收集整理的Dom 优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。