? ? 這兩天比較閑，寫了兩篇關(guān)于JS性能缺陷與解決方案的文章（《JS特性性能缺陷及JIT的解決方案》，《Javascript垃圾回收淺析》），主要描述了untyped，GC帶來的問題與JIT引擎的解決方案。但相對(duì)于Js引擎的問題，我認(rèn)為DOM導(dǎo)致的性能問題更值得關(guān)注。

?

一.Dom的性能瓶頸及原因

1. 為什么是DOM

??? 標(biāo)準(zhǔn)的xml/html的文本解析協(xié)議，常見的有DOM與SAX。在解析速度及內(nèi)存占用上，SAX比DOM有優(yōu)勢(shì)，但為什么瀏覽器選擇DOM解析html？

??? （1）DOM VS SAX

??? SAX提供一次性解析文本，不生成對(duì)象，Iterator模式訪問元素，event-based，PUSH模式觸發(fā)，簡(jiǎn)單說：App需要向Parser注冊(cè)，當(dāng)Parser遍歷xml時(shí)，觸發(fā)調(diào)用APP 。想深入體驗(yàn)，用下javax.xml.parsers.SAXParser。這里說個(gè)題外話，改進(jìn)版StAX是PULL模式，但這都不重要了，重要是：一次性文本解析，不生成對(duì)象。

??? DOM解析文本后，生成DOM樹。即：一次性文本解析，生成對(duì)象。

??? （2）瀏覽器選擇了DOM

??? 單次效率DOM不如SAX，但SAX不生成對(duì)象，瀏覽器很多操作很難滿足，比如：元素定位，元素樣式渲染……所以DOM是必然之選。

?

2. DOM的性能問題

??? 【1】核心問題

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

????DOM操作會(huì)導(dǎo)致一系列的重繪（repaint）、重新排版（reflow）操作。為了確保執(zhí)行結(jié)果的準(zhǔn)確性，所有的修改操作是按順序同步執(zhí)行的。大部分瀏覽器都不會(huì)在JavaScript的執(zhí)行過程中更新DOM。相應(yīng)的，這些瀏覽器將對(duì)對(duì) DOM的操作放進(jìn)一個(gè)隊(duì)列，并在JavaScript腳本執(zhí)行完畢以后按順序一次執(zhí)行完畢。也就是說，在JavaScript執(zhí)行的過程，直到發(fā)生重新排版，用戶一直被阻塞。

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

????導(dǎo)致repaint、reflow的操作：

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

??? * 僅修改DOM元素的字體顏色（只有Repaint，因?yàn)椴恍枰{(diào)整布局）

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

??? * Resize瀏覽器窗口、滾動(dòng)頁面

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

??? 【2】其他

??? 某些Javascript框架中，CSS選擇器，如：var el = $('.hyddd');由于IE6、7不支持，所以Javascript框架必須通過遍歷整個(gè)DOM樹來尋找對(duì)象。

?

二. 針對(duì)DOM問題，Javascript的應(yīng)對(duì)方案

1. 針對(duì)repaint、reflow，Nicholas 大叔在他的《Speed up your JavaScript, Part 4》做了詳細(xì)介紹，這里我也整理一下：

????解決問題的關(guān)鍵是：減少因DOM操作，引起的reflow。Nicholas總結(jié)了一些方法：

??? 【1】在DOM外，執(zhí)行盡量多的變更操作。Demo：

// 不好的做法 for (var i=0; i < items.length; i++){var item = document.createElement("li");item.appendChild(document.createTextNode("Option " + i);list.appendChild(item); }? ? // 更好的做法 // 使用容器存放臨時(shí)變更， 最后再一次性更新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節(jié)點(diǎn)刪除或隱藏，因?yàn)殡[藏的節(jié)點(diǎn)不會(huì)觸發(fā)重排。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如下：

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

? ? 【4】使用緩存，緩存臨時(shí)節(jié)點(diǎn)。

// 不好的做法 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";

?

2. 針選擇其的問題，我只能說：沒辦法…… : (

轉(zhuǎn)載于:https://www.cnblogs.com/songchunmin/p/7789642.html

總結(jié)

以上是生活随笔為你收集整理的DOM性能瓶颈与Javascript性能优化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。