爲什麼說 DOM 操作耗時？要解釋 DOM 操作帶來的性能問題，我們不得不提一下瀏覽器的工作機制。
一、瀏覽器的工作機制
1、線程切換
瀏覽器包含渲染引擎（也稱瀏覽器內核）和 JavaScript 引擎，它們都是單線程運行。單線程的優勢是開發方便，避免多線程下的死鎖、競爭等問題，劣勢是失去了併發能力。
瀏覽器爲了避免兩個引擎同時修改頁面而造成渲染結果不一致的情況，增加了另外一個機制，這兩個引擎具有互斥性，也就是說在某個時刻只有一個引擎在運行，另一個引擎會被阻塞。操作系統在進行線程切換的時候需要保存上一個線程執行時的狀態信息並讀取下一個線程的狀態信息，俗稱上下文切換。而這個操作是比較耗時的。
每次 DOM 操作就會引發線程的上下文切換——從 JavaScript 引擎切換到渲染引擎執行對應操作，然後再切換回 JavaScript 引擎繼續執行，這就帶來了性能損耗。單次切換消耗的時間是非常少的，如果頻繁的大量切換，那麼就會產生性能問題。
2、重新渲染
另一個更加耗時的因素是元素及樣式變化引起的再次渲染，在渲染過程中最耗時的兩個步驟爲重排（Reflow）與重繪（Repaint）。
瀏覽器在渲染頁面時會將 HTML 和 CSS 分別解析成 DOM 樹和 CSSOM 樹，然後合併進行排布，再繪製成我們可見的頁面。如果在操作 DOM 時