前言

因為瀏覽器中通常會將DOM和javascript獨立實現(xiàn)，兩個相互獨立的功能需要通過接口彼此鏈接，就會產(chǎn)生新能上的消耗。訪問DOM就會產(chǎn)生消耗，修改DOM的影響更大。因此，減少對DOM的操作，把運算多留在ECMAScript中處理是理想的選擇。

DOM元素和方法

在操作DOM元素的方法中，有返回html集合的方法，也有返回Nodelist（一個對元素的引用列表）的方法。

返回html集合的方法（html集合與文檔保持連接，文檔更新，集合就會隨之更新，因此使用html進行一些遍歷操作或者別的操作，會非常低效）：

document.getElementsByName() document.getElementsByClassName() document.getElementsByTagName() 復(fù)制代碼

返回Nodelist的方法（包含返回節(jié)點的類數(shù)組對象）：

document.querySelectorAll('css selector') document.querySelector('css selector') 復(fù)制代碼

重繪和重排

瀏覽器在下載完頁面中的資源后（JS,CSS,HTML,圖片），會解析生成兩個內(nèi)部的數(shù)據(jù)結(jié)構(gòu)——DOM樹（表示頁面結(jié)構(gòu)）和渲染樹（表示DOM節(jié)點如何顯示）。

當修改DOM的幾何屬性之后，瀏覽器會使渲染樹中受到改變和影響的部分失效，重新構(gòu)造對應(yīng)的渲染樹，這個過程稱作“重排”。完成重拍后，瀏覽器將重新繪制受影響的部分到屏幕中，這個過程稱為“重繪”。

何時會發(fā)生重排：

1、添加、刪除可見的DOM元素 2、改變DOM元素的大小，邊距等。 3、改變DOM元素的位置。 4、DOM元素的內(nèi)容發(fā)生改變，文本或者圖片等。 5、頁面渲染初始化和瀏覽器窗口的改變。 復(fù)制代碼

由于每次重排都會產(chǎn)生性能消耗，瀏覽器會通過隊列化批量執(zhí)行的方式來優(yōu)化重排過程。但是，在一些對DOM的操作中，會無意間刷新隊列立即執(zhí)行重排：

1、offsetTop。。。 2、scrollTop。。。 3、clientTop。。。 4、getComputedStyle() 復(fù)制代碼

以上操作需要獲取實時的布局信息，因此不等不讓瀏覽器強制刷新隊列以返回正確值。

批量修改DOM降低重排重繪的頻率以提升性能

基本思路是，將需要批量修改的DOM從文檔流中摘出來（也可以是復(fù)制出來），然后對其一頓操作，再把操作后的部分放回去。

有集中方法可以使DOM脫離文檔流：

1、隱藏DOM元素 2、創(chuàng)建一個文檔片段（document fragment） 3、將原始的DOM元素拷貝出來，修改后替換原文檔 復(fù)制代碼

轉(zhuǎn)載于:https://juejin.im/post/5cffb928e51d4510617210a4

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的DOM编程中，提高程序运行速度需要注意的一些点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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