虛擬DOM
- js物件替代真實DOM, 更改避免回流(重新渲染),一次性通過render函式渲染成真實DOM
- 宣告的樣子
- 輸出的樣子
實作render函式生成真實DOM
- 設定屬性
- render函式
- 渲染函式
diff演算法
- diff演算法其實就是對DOM進行different比較不同的一種演算法(虛擬的比較更節約性能)
__ 補丁:用來更新DOM的任務__
比較原則
- 平級對比
- 不跨級對比(無A__洗掉__A)
- 同級復用
遍歷規則
- 先序深度優先遍歷(從根節點向下級子節點遍歷)
- 125叫廣度優先
- 12345深度優先
實作diff函式
- 比較思路規則
-
- type相同,比較屬性,屬性不同生成補丁包patch
{type:'ATTRS',attrs:{class:'xx'} } - 新節點在原DOM中不存在
{type:'REMOVE',index:xxx} - 節點型別不同,直接替換
{type:'REPLACE',newNode:xxx} - 文本變化
{type:'TEXT',text:'xxx'}
- type相同,比較屬性,屬性不同生成補丁包patch
-
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/142998.html
標籤：JavaScript