DOM編程中，提升程序運行速度須要注意的一些點

前言

由於瀏覽器中一般會將DOM和javascript獨立實現，兩個相互獨立的功能須要經過接口彼此連接，就會產生新能上的消耗。訪問DOM就會產生消耗，修改DOM的影響更大。所以，減小對DOM的操做，把運算多留在ECMAScript中處理是理想的選擇。

DOM元素和方法

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

返回html集合的方法（html集合與文檔保持鏈接，文檔更新，集合就會隨之更新，所以使用html進行一些遍歷操做或者別的操做，會很是低效）：

document.getElementsByName()
document.getElementsByClassName()
document.getElementsByTagName()
複製代碼

返回Nodelist的方法（包含返回節點的類數組對象）：

document.querySelectorAll('css selector')
document.querySelector('css selector')
複製代碼

重繪和重排

瀏覽器在下載完頁面中的資源後（JS,CSS,HTML,圖片），會解析生成兩個內部的數據結構——DOM樹（表示頁面結構）和渲染樹（表示DOM節點如何顯示）。

當修改DOM的幾何屬性以後，瀏覽器會使渲染樹中受到改變和影響的部分失效，從新構造對應的渲染樹，這個過程稱做「重排」。完成重拍後，瀏覽器將從新繪製受影響的部分到屏幕中，這個過程稱爲「重繪」。

什麼時候會發生重排：

一、添加、刪除可見的DOM元素
二、改變DOM元素的大小，邊距等。
三、改變DOM元素的位置。
四、DOM元素的內容發生改變，文本或者圖片等。
五、頁面渲染初始化和瀏覽器窗口的改變。
複製代碼

因爲每次重排都會產生性能消耗，瀏覽器會經過隊列化批量執行的方式來優化重排過程。可是，在一些對DOM的操做中，會無心間刷新隊列當即執行重排：

一、offsetTop。。。
二、scrollTop。。。
三、clientTop。。。
四、getComputedStyle()
複製代碼

以上操做須要獲取實時的佈局信息，所以不等不讓瀏覽器強制刷新隊列以返回正確值。

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

基本思路是，將須要批量修改的DOM從文檔流中摘出來（也能夠是複製出來），而後對其一頓操做，再把操做後的部分放回去。

有集中方法能夠使DOM脫離文檔流：

一、隱藏DOM元素
二、建立一個文檔片斷（document fragment）
三、將原始的DOM元素拷貝出來，修改後替換原文檔
複製代碼