DOM和JavaScript在瀏覽器中是獨立實現的; IE ： DOM—> 一個名為mshtml.dll的庫（內部稱為Trident） JavaScript—> 它的實現名為JScript，位于jscript文件中 Safaria ： JavaScript—> 由獨立的JavaScriptCore引擎（最新版本名字為SquirrelFish）實現 DOM—> 使用webkit的WebCore實現 Chorme: JavaScript—> V8 DOM—> 使用webkit的WebCore FF: JavaScript —> SpiderMonkey（最新版本為TraceMonkey） DOM—> Gecko的渲染引擎 兩個相互的功能只要通過接口彼此連接就會產生消耗。因此如果多次訪問某個DOM節點，就需要將其緩存在局部變量，以此達到提高性能的效果。 DOM訪問與修改： 用innerHTML代替使用DOM創造節點的方法； 用局部變量緩存DOM節點，以此減少節點的訪問，提高性能； 用element.cloneNode()的方法代替document.createElement(); 若使用元素集合的length，將其保存在局部變量； 使用nextSibling代替childNodes遍歷節點（老瀏覽器中更快）； 使用children代替childNode遍歷子節點； 使用querySeletorAll()和querySeletor()代替document.getElementsByTagName()和 document.getElementById(); 重繪和重排： 重排：瀏覽器會使渲染樹中受到影響的部分失效，并重新構造渲染樹。 例如：添加刪除可見的DOM元素；元素位置，尺寸改變；內容改變；瀏覽器窗口尺寸改變。 重繪：完成重排后，瀏覽器會重新繪制收到影響的部分到屏幕中。 1、避免或緩存使用最新的布局信息：偏移量(offsets),滾動位置(scroll values),計算出的樣式指(getComputedStyle). 2、和并多次對DOM的操作，例如cssText(注：它會覆蓋已保存的樣式，可使用cssText+=“value”) 進行一系列的操作的時候可以使用以下步驟來減少重排和重繪：使元素脫離文檔流，對其應用多重改變，把元素帶回文檔中。 步驟二中有三種方法：隱藏元素，應用修改，重新顯示；使用文本片段；將原始元素拷貝到一個脫離文檔流的節點中，修改副本，完成后再替換原始元素。第二種方法最好。

轉載于:https://www.cnblogs.com/CloverH/p/5246633.html

總結

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

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