## 一、概述 瀏覽器渲染引擎工作流程都差不多，大致分為5步； 第一步，用HTML分析器，分析HTML元素，**構建一顆DOM樹**(標記化和樹構建)。 第二步，用CSS分析器，分析CSS文件和元素上的inline樣式，生成頁面的樣式表。 第三步，將DOM樹和樣式表，關聯起來，構建一顆Render樹(這一過程又稱為Attachment)。每個DOM節點都有attach方法，接受樣式信息，返回一個render對象(又名renderer)。這些render對象最終會被構建成一顆Render樹。 第四步，有了Render樹，瀏覽器開始布局，為每個Render樹上的節點確定一個在顯示屏上出現的精確坐標。 第五步，Render樹和節點顯示坐標都有了，就調用每個節點paint方法，把它們繪制出來。 ## 二、JS操作DOM的代價 ?用我們傳統的開發模式，原生JS或JQ操作DOM時，瀏覽器會從構建DOM樹開始從頭到尾執行一遍流程。在一次操作中，我需要更新10個DOM節點，瀏覽器收到第一個DOM請求后并不知道還有9次更新操作，因此會馬上執行流程，最終執行10次。例如，第一次計算完，緊接著下一個DOM更新請求，這個節點的坐標值就變了，前一次計算為無用功。計算DOM節點坐標值等都是白白浪費的性能。即使計算機硬件一直在迭代更新，操作DOM的代價仍舊是昂貴的，頻繁操作還是會出現頁面卡頓，影響用戶體驗。 ## 三、虛擬DOM 虛擬DOM就是為了解決瀏覽器性能問題而被設計出來的。若一次操作中有10次更新DOM的動作，虛擬DOM不會立即操作DOM，而是將這10次更新的diff內容保存到本地一個JS對象中，最終將這個JS對象一次性attch到DOM樹上，再進行后續操作，避免大量無謂的計算量。所以，用JS對象模擬DOM節點的好處是，頁面的更新可以先全部反映在JS對象(虛擬DOM)上，操作內存中的JS對象的速度顯然要更快，等更新完成后，再將最終的JS對象映射成真實的DOM，交由瀏覽器去繪制。 > Virtual DOM 本質上就是在 JS 和 DOM 之間做了一個緩存。可以類比 CPU 和硬盤，既然硬盤這么慢，我們就在它們之間加個緩存：既然 DOM 這么慢，我們就在它們 JS 和 DOM 之間加個緩存。CPU（JS）只操作內存（Virtual DOM），最后的時候再把變更寫入硬盤（DOM）；