patch算法
1,是什麼
patch,中文翻譯爲“補丁”,vue更新時的patch算法,也就就是通過打補丁的形式充分利用原有的dom進行增加、刪除、移動的操作,從而避免了重新創建大量dom操作,進一步提升了性能。
2,當數據發生變化時,vue是怎麼更新節點的
要知道渲染真實DOM的開銷是很大的,比如有時候我們修改了某個數據,如果直接渲染到真實dom上會引起整個dom樹的重繪和重排(迴流),有沒有可能我們只更新我們修改的那一小塊dom而不要更新整個dom呢?patch算法能夠幫助我們。
我們先根據真實DOM生成一顆virtual DOM,當virtual DOM某個節點的數據改變後會生成一個新的Vnode,然後Vnode和oldVnode作對比,發現有不一樣的地方就直接修改在真實的DOM上。
Vue中diff算法過程就是調用名爲patch函數
3. virtual DOM和真實DOM的區別?
virtual DOM是將真實的DOM的數據抽取出來,以對象的形式模擬樹形結構。比如dom是這樣的:
<div>
<p>123</p>
</div>
對應的virtual DOM(僞代碼):
var Vnode = {
tag: 'div',
children: [
{ tag: 'p', text: '123' }
]
};
(溫馨提示:VNode和oldVNode都是對象,一定要記住)
4. diff算法?
4.1,diff算法的比較時注意,只會在同級進行比較
在採取diff算法比較新舊節點的時候,比較只會在同層級進行, 不會跨層級比較。
//old
<div>
<p>123</p>
</div>
//new
<div>
<span>456</span>
</div>
上面的代碼會分別比較同一層的兩個div以及第二層的p和span,但是不會拿div和span作比較。在別處看到的一張很形象的圖:(diff算法只會在同級比較)
4.2 diff算法觸發過程
相信大家都知道,vue的雙向綁定,是通過重置Object.defineProperty中的get和set方法來進行數據劫持,進而觸發修改視圖操作。(而React則是通過setState方法手動觸發修改視圖的操作的).
所以當數據發生改變時,set方法會讓調用Dep.notify通知所有訂閱者Watcher,訂閱者就會調用patch方法給真實的DOM打補丁,更新相應的視圖。
4.3 patch算法的具體算法
第一步,patch函數接收兩個參數oldVnode和Vnode分別代表新舊節點的對象(形如:Vnode={type:’’,props:{},children:[ ]})
function patch (oldVnode, vnode) {
// some code
if (sameVnode(oldVnode, vnode)) {
patchVnode(oldVnode, vnode)
} else {
const oEl = oldVnode.el // 當前oldVnode對應的真實元素節點
let parentEle = api.parentNode(oEl) // 父元素
createEle(vnode) // 根據Vnode生成新元素
if (parentEle !== null) {
api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)) // 將新元素添加進父元素
api.removeChild(parentEle, oldVnode.el) // 移除以前的舊元素節點
oldVnode = null
}
}
// some code
return vnode
}
第二步,根據sameVnode方法,判斷兩節點是否值得比較,
值得比較則執行patchVnode,
不值得比較則用Vnode替換oldVnode,再渲染真實dom
//通過判斷key、標籤名、是否爲註釋、data等是否相等,來判斷是否有必要進行比較。
function sameVnode (a, b) {
return (
a.key === b.key && // key值
a.tag === b.tag && // 標籤名
a.isComment === b.isComment && // 是否爲註釋節點
// 是否都定義了data,data包含一些具體信息,例如onclick , style
isDef(a.data) === isDef(b.data) &&
sameInputType(a, b) // 當標籤是<input>的時候,type必須相同
)
}
如果兩個節點都是一樣的,那麼就深入檢查他們的子節點。如果兩個節點不一樣那就說明Vnode完全被改變了,就可以直接替換oldVnode。
第三步,patchVnode
當我們確定兩個節點值得比較之後我們會對兩個節點指定patchVnode方法。那麼這個方法做了什麼呢?
patchVnode (oldVnode, vnode) {
const el = vnode.el = oldVnode.el
let i, oldCh = oldVnode.children, ch = vnode.children
if (oldVnode === vnode) return
if (oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text) {
api.setTextContent(el, vnode.text)
}else {
updateEle(el, vnode, oldVnode)
if (oldCh && ch && oldCh !== ch) {
updateChildren(el, oldCh, ch)
}else if (ch){
createEle(vnode) //create el's children dom
}else if (oldCh){
api.removeChildren(el)
}
}
}
這個函數做了以下事情:
- 找到對應的真實dom,稱爲el
- 判斷Vnode和oldVnode是否指向同一個對象,如果是,那麼直接return
- 如果他們都有文本節點並且不相等,那麼將el的文本節點設置爲Vnode的文本節點。
- 如果oldVnode有子節點而Vnode沒有,則刪除el的子節點
- 如果oldVnode沒有子節點而Vnode有子節點,則將Vnode的子節點真實化之後添加到el
- 如果兩者都有子節點,則執行updateChildren函數比較子節點,這一步很重要
其他幾個點都很好理解,我們詳細來講一下updateChildren
第四步,updateChildren
這個函數做了什麼?
- 將Vnode的子節點Vch和oldVnode的子節點oldCh提取出來
- oldCh和vCh各有兩個頭尾的變量StartIdx和EndIdx,它們的2個變量相互比較,一共有4種比較方式。同時,一旦StartIdx>EndIdx表明oldCh和vCh至少有一個已經遍歷完了,就會結束比較。
圖解updateChildren(詳細的diff算法)
終於來到了這一部分,上面的總結相信很多人也看得一臉懵逼,下面我們好好說道說道。
粉紅色的部分爲oldCh(舊的vnode) 、黃色的部分爲vCh(新的vnode)
我們將它們取出來並分別用s和e指針指向它們的頭child和尾child
現在分別對oldS、oldE、S、E兩兩做sameVnode比較,有四種比較方式,當其中兩個能匹配上那麼真實dom中的相應節點會移到Vnode相應的位置,這句話有點繞,打個比方
- 如果是oldS和E匹配上了,那麼真實dom中的第一個節點會移到最後
- 如果是oldE和S匹配上了,那麼真實dom中的最後一個節點會移到最前,匹配上的兩個指針向中間移動
- 如果四種匹配沒有一對是成功的,那麼遍歷oldChild,S挨個和他們匹配,匹配成功就在真實dom中將成功的節點移到最前面,如果依舊沒有成功的,那麼將S對應的節點插入到dom中對應的oldS位置,oldS和S指針向中間移動。
再配個圖
- 第一步
oldS = a, oldE = d;
S = a, E = b;
oldS和S匹配,則將dom中的a節點放到第一個,已經是第一個了就不管了,此時dom的位置爲:a b d
- 第二步
oldS = b, oldE = d;
S = c, E = b;
oldS和E匹配,就將原本的b節點移動到最後,因爲E是最後一個節點,他們位置要一致,這就是上面說的:當其中兩個能匹配上那麼真實dom中的相應節點會移到Vnode相應的位置,此時dom的位置爲:a d b
- 第三步
oldS = d, oldE = d;
S = c, E = d;
oldE和E匹配,位置不變此時dom的位置爲:a d b
- 第四步
oldS++;
oldE--;
oldS > oldE;
遍歷結束,說明oldCh先遍歷完。就將剩餘的vCh節點根據自己的的index插入到真實dom中去,此時dom位置爲:a c d b
這個匹配過程的結束有兩種情況:
1,oldS > oldE表示oldCh先遍歷完,那麼就將多餘的vCh根據index添加到dom中去(如上圖)
2,S > E表示vCh先遍歷完,那麼就在真實dom中將區間爲 [oldS, oldE]的多餘節點刪掉
就這樣層層遞歸下去,直到將oldVnode和Vnode中的所有子節點比對完。
下面再舉一個例子,可以像上面那樣自己試着模擬一下
參考鏈接:https://www.cnblogs.com/wind-lanyan/p/9061684.html