1.用html分析器，分析html元素，建立一顆dom樹
2.用css分析器，分析css樣式，生成頁面的樣式表
3.將樣式表和dom數關聯起來，構建成乙個render（渲染）樹，每乙個dom節點都有attach（固定）方法來接受各自的樣式，最後集中成一棵render（渲染）樹
4.有了render（渲染）樹之後，就會給每乙個渲染元素的節點固定在頁面上的某乙個位置
5.render樹和節點位置都有了，就呼叫每個節點方法，把效果渲染出來，顯示在頁面上
用傳統的模式開發，原生js或者jq操作dom的話，瀏覽器會從頭到尾執行一遍流程。假如在一次操作中，我需要更新20個dom節點的話，瀏覽器收到第乙個請求後，不知道後面還有19次更新操作，所以執行流程，知道20次結束。當下乙個更新請求執行後，第一次的執行流程就變成了無用功了，也就白白的浪費瀏覽器的效能，代價還是很昂貴的，頻繁操作也會出現頁面卡頓，影響使用者體驗。內部當資料變化，生成一顆新的虛擬dom樹，與上一次的虛擬dom樹結構進行對比。也就是說，當資料變化的時候，大量操作的是虛擬dom,而虛擬dom屬於記憶體資料，操作起來效能要高的多。而真實的dom操作，只有在追加的那一刻，才會進行操作，大大提公升了效能。
1記憶體中生成一棵虛擬dom樹在這裡插入**片
2.將記憶體中的虛擬dom樹初始化渲染成真實dom樹
3.當我們修改data裡面的資料的時候
4.將之前的虛擬dom樹結合新的資料生成一棵新的虛擬dom樹
6.將對比出來的差異的部分進行重新真實dom結構的渲染
附上簡單的對比案例
虛擬DOM操作
什麼是虛擬dom 虛擬dom的設計思想 1 提供一種方便的工具，使得開發效率得到保障 2 保證最小化的dom操作，使得執行效率得到保障 也就是說，虛擬dom的框架 工具都是這麼做的 根據虛擬dom樹最初渲染成真實dom 當資料變化，或者說是頁面需要重新渲染的時候，會重新生成乙個新的完整的虛擬dom ...
Js操作 DOM操作
一 節點屬性 dom 是樹型結構，相應的，可以通過一些節點屬性來遍歷節點樹 方法說明 nodename 節點名稱，相當於tagname.屬性節點返回屬性名，文字節點返回 text。nodename，是唯讀的。nodetype 節點的型別，返回值 1，元素節點 2，屬性節點 3，文字節點。nodety...
js中的DOM 簡解
二 eventtarget 介面 三 node 的介面 2 node的方法 四 document 介面 五 element 介面 其他一 前提概念理解 1.doctype 一般我們說的dom預設是指html document。部分人就會以為document文件，指的就是html文件。事實上不正確的。...