JS 和 DOM 交互的效率很低
- Jquery 的出現(xiàn)雖然解決了 DOM 的綁定, 但是并沒有解決頻繁操作 DOM 的情況.
- 一個(gè)簡單的 div 都有很多無用的屬性
- JS和 DOM 之間進(jìn)行溝通是有代價(jià)的疟呐，JS 是通過 JS 引擎渣磷，而 DOM 屬于渲染引擎普泡。這就類似于計(jì)算機(jī)中的 cpu 和硬盤，cpu 很快原押，但是硬盤很慢，所以有了緩存(劃重點(diǎn)，虛擬 DOM 來了)参袱。
看下面的兩段代碼
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
{
type: "ol", props:{id: "orderList"},
children: [
{type: "li", props: {}, children: ["item 1"]},
{type: "li", props: {}, children: ["item 2"]},
{type: "li", props: {}, children: ["item 3"]}
]
}
我們是不是可以用JS對象表示DOM樹的結(jié)構(gòu)，注意以下兩點(diǎn)
- 用JS對象表示DOM元素
- 用JS字符串表示文本節(jié)點(diǎn)
實(shí)現(xiàn)邏輯
- JS對象創(chuàng)建虛擬 DOM樹 插入到文檔中(vm)
- 狀態(tài)變更時(shí): 重新構(gòu)建一顆虛擬 DOM 樹, 比較兩顆虛擬 DOM 樹的差異(diff)
- 把差異更新到真正的 DOM 樹(patch)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
