減少存取DOM的次數提升javascript效能_javascript技巧

存取DOM元素是有代價的，修改DOM元素則更為昂貴，因為它會導致瀏覽器重新計算頁面的幾何變化。

當然，最糟的情況是在循環中存取修改元素，尤其是對HTML元素集合循環操作。

例如：

複製程式碼 程式碼如下:

程式碼如下:

}
}

這個函數循環修改頁元素的內容。這段程式碼的問題在於，每次循環迭代，該元素都被存取兩次：一次讀取innerHTML屬性，另外一次重寫它。 一個更有效率的做法是使用局部變數儲存更新後的內容，然後在循環結束後一次寫入：

複製程式碼

程式碼如下:

document.getElementById('here') .innerHTML =content;
} 存取DOM的次數越多，程式碼運行速度越慢。因此，有其他方案可以取代的時候，我們要盡量減少造訪DOM的次數。