站長資訊網(wǎng)
vue3編譯優(yōu)化有：1、引入了 patchFlag，用來標(biāo)記動態(tài)內(nèi)容；在編譯過程中會根據(jù)不同的屬性類型打上不同的標(biāo)識，從而實現(xiàn)了快速diff算法。2、Block Tree。3、靜態(tài)提升，是將靜態(tài)的節(jié)點或者屬性提升出去。4、預(yù)解析字符串化，當(dāng)連續(xù)靜態(tài)節(jié)點超過10個時，會將靜態(tài)節(jié)點序列化為字符串。5、函數(shù)緩存；開啟cacheHandlers選項后，函數(shù)會被緩存起來，后續(xù)可直接使用。
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
本文主要來分析 Vue3.0 編譯階段做的優(yōu)化，在 patch 階段是如何利用這些優(yōu)化策略來減少比對次數(shù)。 由于組件更新時依然需要遍歷該組件的整個 vnode 樹，比如下面這個模板：
<template> <div id="container"> <p class="text">static text</p> <p class="text">static text</p> <p class="text">{{ message }}</p> <p class="text">static text</p> <p class="text">static text</p> </div> </template>
整個 diff 過程如圖所示：
可以看到，因為這段代碼中只有一個動態(tài)節(jié)點，所以這里有很多 diff 和遍歷其實都是不需要的，這就會導(dǎo)致 vnode 的性能跟模版大小正相關(guān)，跟動態(tài)節(jié)點的數(shù)量無關(guān)，當(dāng)一些組件的整個模版內(nèi)只有少量動態(tài)節(jié)點時，這些遍歷都是性能的浪費。對于上述例子，理想狀態(tài)只需要 diff 這個綁定 message 動態(tài)節(jié)點的 p 標(biāo)簽即可。
Vue.js 3.0 通過編譯階段對靜態(tài)模板的分析，編譯生成了 Block tree。
Block tree 是一個將模板基于動態(tài)節(jié)點指令切割的嵌套區(qū)塊，每個區(qū)塊內(nèi)部的節(jié)點結(jié)構(gòu)是固定的，而且每個區(qū)塊只需要以一個 Array 來追蹤自身包含的動態(tài)節(jié)點。借助 Block tree，Vue.js 將 vnode 更新性能由與模版整體大小相關(guān)提升為與動態(tài)內(nèi)容的數(shù)量相關(guān)，這是一個非常大的性能突破。
PatchFlag
由于 diff 算法無法避免新舊虛擬 DOM 中無用的比較操作，Vue.js 3.0 引入了 patchFlag，用來標(biāo)記動態(tài)內(nèi)容。在編譯過程中會根據(jù)不同的屬性類型打上不同的標(biāo)識，從而實現(xiàn)了快速 diff 算法。PatchFlags 的所有枚舉類型如下所示：
export const enum PatchFlags { TEXT = 1, // 動態(tài)文本節(jié)點 CLASS = 1 << 1, // 動態(tài)class STYLE = 1 << 2, // 動態(tài)style PROPS = 1 << 3, // 除了class、style動態(tài)屬性 FULL_PROPS = 1 << 4, // 有key，需要完整diff HYDRATE_EVENTS = 1 << 5, // 掛載過事件的 STABLE_FRAGMENT = 1 << 6, // 穩(wěn)定序列，子節(jié)點順序不會發(fā)生變化 KEYED_FRAGMENT = 1 << 7, // 子節(jié)點有key的fragment UNKEYED_FRAGMENT = 1 << 8, // 子節(jié)點沒有key的fragment NEED_PATCH = 1 << 9, // 進行非props比較, ref比較 DYNAMIC_SLOTS = 1 << 10, // 動態(tài)插槽 DEV_ROOT_FRAGMENT = 1 << 11, HOISTED = -1, // 表示靜態(tài)節(jié)點，內(nèi)容變化，不比較兒子 BAIL = -2 // 表示diff算法應(yīng)該結(jié)束 }
Block Tree
左側(cè)的 template 經(jīng)過編譯后會生成右側(cè)的 render 函數(shù)，里面有 _openBlock、_createElementBlock、_toDisplayString、_createElementVNode(createVnode) 等輔助函數(shù)。
let currentBlock = null function _openBlock() { currentBlock = [] // 用一個數(shù)組來收集多個動態(tài)節(jié)點 } function _createElementBlock(type, props, children, patchFlag) { return setupBlock(createVnode(type, props, children, patchFlag)); } export function createVnode(type, props, children = null, patchFlag = 0) { const vnode = { type, props, children, el: null, // 虛擬節(jié)點上對應(yīng)的真實節(jié)點，后續(xù)diff算法 key: props?.["key"], __v_isVnode: true, shapeFlag, patchFlag }; ... if (currentBlock && vnode.patchFlag > 0) { currentBlock.push(vnode); } return vnode; } function setupBlock(vnode) { vnode.dynamicChildren = currentBlock; currentBlock = null; return vnode; } function _toDisplayString(val) { return isString(val) ? val : val == null ? "" : isObject(val) ? JSON.stringify(val) : String(val); }
此時生成的 vnode 如下:
此時生成的虛擬節(jié)點多出一個 dynamicChildren 屬性，里面收集了動態(tài)節(jié)點 span。
節(jié)點 diff 優(yōu)化策略:
我們之前分析過，在 patch 階段更新節(jié)點元素的時候，會執(zhí)行 patchElement 函數(shù)，我們再來回顧一下它的實現(xiàn)：
const patchElement = (n1, n2) => { // 先復(fù)用節(jié)點、在比較屬性、在比較兒子 let el = n2.el = n1.el; let oldProps = n1.props || {}; // 對象 let newProps = n2.props || {}; // 對象 patchProps(oldProps, newProps, el); if (n2.dynamicChildren) { // 只比較動態(tài)元素 patchBlockChildren(n1, n2); } else { patchChildren(n1, n2, el); // 全量 diff } }
我們在前面組件更新的章節(jié)分析過這個流程，在分析子節(jié)點更新的部分，當(dāng)時并沒有考慮到優(yōu)化的場景，所以只分析了全量比對更新的場景。
而實際上，如果這個 vnode 是一個 Block vnode，那么我們不用去通過 patchChildren 全量比對，只需要通過 patchBlockChildren 去比對并更新 Block 中的動態(tài)子節(jié)點即可。 由此可以看出性能被大幅度提升,從 tree 級別的比對，變成了線性結(jié)構(gòu)比對。
我們來看一下它的實現(xiàn)：
const patchBlockChildren = (n1, n2) => { for (let i = 0; i < n2.dynamicChildren.length; i++) { patchElement(n1.dynamicChildren[i], n2.dynamicChildren[i]) } }
屬性 diff 優(yōu)化策略:
接下來我們看一下屬性比對的優(yōu)化策略:
const patchElement = (n1, n2) => { // 先復(fù)用節(jié)點、在比較屬性、在比較兒子 let el = n2.el = n1.el; let oldProps = n1.props || {}; // 對象 let newProps = n2.props || {}; // 對象 let { patchFlag, dynamicChildren } = n2 if (patchFlag > 0) { if (patchFlag & PatchFlags.FULL_PROPS) { // 對所 props 都進行比較更新 patchProps(el, n2, oldProps, newProps, ...) } else { // 存在動態(tài) class 屬性時 if (patchFlag & PatchFlags.CLASS) { if (oldProps.class !== newProps.class) { hostPatchProp(el, 'class', null, newProps.class, ...) } } // 存在動態(tài) style 屬性時 if (patchFlag & PatchFlags.STYLE) { hostPatchProp(el, 'style', oldProps.style, newProps.style, ...) } // 針對除了 style、class 的 props if (patchFlag & PatchFlags.PROPS) { const propsToUpdate = n2.dynamicProps! for (let i = 0; i < propsToUpdate.length; i++) { const key = propsToUpdate[i] const prev = oldProps[key] const next = newProps[key] if (next !== prev) { hostPatchProp(el, key, prev, next, ...) } } } if (patchFlag & PatchFlags.TEXT) { // 存在動態(tài)文本 if (n1.children !== n2.children) { hostSetElementText(el, n2.children as string) } } } else if (dynamicChildren == null) { patchProps(el, n2, oldProps, newProps, ...) } } } function hostPatchProp(el, key, prevValue, nextValue) { if (key === 'class') { // 更新 class patchClass(el, nextValue) } else if (key === 'style') { // 更新 style patchStyle(el, prevValue, nextValue) } else if (/^on[^a-z]/.test(key)) { // events addEventListener patchEvent(el, key, nextValue); } else { // 普通屬性 el.setAttribute patchAttr(el, key, nextValue); } } function patchClass(el, nextValue) { if (nextValue == null) { el.removeAttribute('class'); // 如果不需要class直接移除 } else { el.className = nextValue } } function patchStyle(el, prevValue, nextValue = {}){ ... } function patchAttr(el, key, nextValue){ ... }
總結(jié): vue3 會充分利用 patchFlag 和 dynamicChildren 做優(yōu)化。如果確定只是某個局部的變動，比如 style 改變，那么只會調(diào)用 hostPatchProp 并傳入對應(yīng)的參數(shù) style 做特定的更新(靶向更新)；如果有 dynamicChildren，會執(zhí)行 patchBlockChildren 做對比更新，不會每次都對 props 和子節(jié)點進行全量的對比更新。圖解如下：
靜態(tài)提升
靜態(tài)提升是將靜態(tài)的節(jié)點或者屬性提升出去，假設(shè)有以下模板:
<div> <span>hello</span> <span a=1 b=2>{{name}}</span> <a><span>{{age}}</span></a> </div>
編譯生成的 render 函數(shù)如下:
export function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createElementBlock("div", null, [ _createElementVNode("span", null, "hello"), _createElementVNode("span", { a: "1", b: "2" }, _toDisplayString(_ctx.name), 1 /* TEXT */), _createElementVNode("a", null, [ _createElementVNode("span", null, _toDisplayString(_ctx.age), 1 /* TEXT */) ]) ])) }
我們把模板編譯成 render 函數(shù)是這個醬紫的，那么問題就是每次調(diào)用 render 函數(shù)都要重新創(chuàng)建虛擬節(jié)點。
開啟靜態(tài)提升 hoistStatic 選項后
const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", null, "hello", -1 /* HOISTED */) const _hoisted_2 = { a: "1", b: "2" } export function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createElementBlock("div", null, [ _hoisted_1, _createElementVNode("span", _hoisted_2, _toDisplayString(_ctx.name), 1 /* TEXT */), _createElementVNode("a", null, [ _createElementVNode("span", null, _toDisplayString(_ctx.age), 1 /* TEXT */) ]) ])) }
預(yù)解析字符串化
靜態(tài)提升的節(jié)點都是靜態(tài)的，我們可以將提升出來的節(jié)點字符串化。 當(dāng)連續(xù)靜態(tài)節(jié)點超過 10 個時，會將靜態(tài)節(jié)點序列化為字符串。
假如有如下模板:
<div> <span>static</span> <span>static</span> <span>static</span> <span>static</span> <span>static</span> <span>static</span> <span>static</span> <span>static</span> <span>static</span> <span>static</span> </div>
開啟靜態(tài)提升 hoistStatic 選項后
const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<span>static</span><span>static</span><span>static</span><span>static</span><span>static</span><span>static</span><span>static</span><span>static</span><span>static</span><span>static</span>", 10) const _hoisted_11 = [ _hoisted_1] export function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createElementBlock("div", null, _hoisted_11)) }
函數(shù)緩存
假如有如下模板:
<div @click="event => v = event.target.value"></div>
編譯后：
const _hoisted_1 = ["onClick"] export function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createElementBlock("div", { onClick: event => _ctx.v = event.target.value }, null, 8 /* PROPS */, _hoisted_1)) }
每次調(diào)用 render 的時候要創(chuàng)建新函數(shù)，開啟函數(shù)緩存 cacheHandlers 選項后，函數(shù)會被緩存起來，后續(xù)可以直接使用
export function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createElementBlock("div", { onClick: _cache[0] || (_cache[0] = event => _ctx.v = event.target.value) })) }
總結(jié)
以上幾點即為 Vuejs 在編譯階段做的優(yōu)化，基于上面幾點，Vuejs 在 patch 過程中極大地提高了性能。
【
