1.diff算法優(yōu)化
vue2.0 中虛擬dom 是全量對比;vue3.0 中新增了靜態(tài)標記(patchFlag),只對比有PF的節(jié)點,并且通過Flag的信息對比節(jié)點的具體內(nèi)容。
通俗來講就是中解析模板字符串時伸但,將純靜態(tài)元素與動態(tài)元素分開。靜態(tài)元素放在children留搔,動態(tài)元素放在dynamicChildren更胖,diff時只比對dynamicChildren就可以了。
// Block - Block Tree
{
tag: 'div',
children: [
{ tag: 'h1', children: 'hello world!' },
],
dynamicChildren: [
// 所有子元素中動態(tài)的部分哦
{ tag: 'p', children: ctx.text, patchFlag: 1 /* TEXT */ },
]
}
2.剪枝 Tree Shaking
剪掉不必要的模塊隔显,沒用到的模塊不會打包到文件中却妨。
3.靜態(tài)樹提升 Static Tree Hoisting
簡而言之就是做了個緩存,不參與更新的元素只會被創(chuàng)建一次括眠,在下次渲染時直接復用就可以彪标。那么對于非靜態(tài)元素怎么辦呢?那就看看它的屬性掷豺,屬性中的靜態(tài)部分也是可以做靜態(tài)提升的捞烟。盡最大可能將可靜態(tài)提升的不分靜態(tài)提升。
4.cacheHandlers 事件偵聽器緩存
默認情況下onClick 會被視為動態(tài)綁定当船,所以每次會追蹤它的變化题画,但是沒有變化,只要緩存起來德频。下次從緩存里面取就可以了苍息。
5. 基于 Proxy 的觀察者機制
Object.defineProperty是一個相對比較昂貴的操作,因為它直接操作對象的屬性,顆粒度比較小档叔。將它替換為es6的Proxy桌粉,在目標對象之上架了一層攔截,代理的是對象而不是對象的屬性衙四。這樣可以將原本對對象屬性的操作變?yōu)閷φ麄€對象的操作,顆粒度變大患亿。
javascript引擎在解析的時候希望對象的結(jié)構(gòu)越穩(wěn)定越好传蹈,如果對象一直在變,可優(yōu)化性降低步藕,proxy不需要對原始對象做太多操作惦界。