浙江网站建设推广公司,长春市制作网站费用,互联网保险中介平台,wordpress 新闻发布官方文档中说vue3在 客户端渲染效率比vue2提升了1.3~2倍#xff0c; SSR渲染效率比vue2提升了2~3倍#xff0c;那么究竟是怎么提升的呢#xff1f;
一、静态提升 在 vue3项目中的package.json文件中#xff0c;可以看到这个 vue/compiler-sfc#xff0c;它是用来解析(.v…官方文档中说vue3在 客户端渲染效率比vue2提升了1.3~2倍 SSR渲染效率比vue2提升了2~3倍那么究竟是怎么提升的呢
一、静态提升 在 vue3项目中的package.json文件中可以看到这个 vue/compiler-sfc它是用来解析(.vue)文件的。在解析的时候下面的静态节点会被提升。
元素节点没有绑定动态内容
//vue2的静态节点
render(){createVNode(h1,null,Hello World)//...
}//vue3的静态节点
const hoisted createVNode(h1,null,Hello World)
function render(){//直接使用hoisted
}
静态属性会被提升
div classhome{{user.name}}
/div
以上代码div的节点虽然是动态的但是class属性是静态的 所以会将class属性提出
const hoisted {class:home};function render(){createVNode(div,hoisted,user.name)
} class被提出后可以反复重用hoisted 对象减少内容占用。而vue2 每次都会重建一个对象。
二、预字符串化 当编译器遇到大量的且连续的静态内容时会将其编译为一个普通字符串节点。
templateheaderullia hreflora/a/lilia hreflora/a/lilia hreflora/a/lilia hreflora/a/lilia hreflora/a/lilia hreflora/a/lilia hreflora/a/li/ul
/template 编译结果如下
const _hoisted_1 /*#__PURE__*/
_createStaticVNode(ul data-v-7a7a37b1li data-v-7a7a37b1a href\\ data-v-7a7a37b1lora/a/lili data-v-7a7a37b1a href\\ data-v-7a7a37b1lora/a/lili data-v-7a7a37b1a href\\ data-v-7a7a37b1lora/a/lili data-v-7a7a37b1a href\\ data-v-7a7a37b1lora/a/lili data-v-7a7a37b1a href\\ data-v-7a7a37b1lora/a/lili data-v-7a7a37b1a href\\ data-v-7a7a37b1lora/a/lili data-v-7a7a37b1a href\\ data-v-7a7a37b1lora/a/li/ul, 1)三、缓存事件处理函数 在vue3会将事件缓存起来在执行的时候会将事件编译成函数缓存在_cache对象中。看_cache中有这个函数有就直接返回没有把这个函数初赋值给_cache。 button clickcount增加/button 编译结果如下
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(),_createElementBlock(div, null, [_createElementVNode(button, {onClick: _cache[0] || (_cache[0] $event($setup.count))}, 增加)]))
}
四、Block Tree Block Tree是一个非常大的更新是为了解决新旧节点对比的效率问题。vue2在对比新旧数的时候并不知道哪些节点时静态的哪些节点时动态的因此只能一层一层比较这就浪费了大部分时间在对比静态节点上。
而vue3对节点进行了标记
templatedivh1lora/h1h1{{ count }}/h1div{{ count }}/div/div
/template 从上面结果可以看出对静态节点的标识是 -1 /* HOISTED */静态动态节点的标识是 1 /* TEXT */ 动态并且会把所有动态节点提取到根节点。更新的时候直接找到根节点Block节点然后找到动态节点进行对比。
五、PatchFlag vue2在对比没一个节点时并不知道这个节点哪些相关信息会发生变化因此只能将所有信息依次对比。 在vue3中根据各个节点的不同的特点打上不同的PatchFlag在patch 的时候就会根据PatchFlag进行比较不会进行全量比较。 从上面的结果可以看出
当只有节点的内容是动态是就会标记 1 /* TEXT */当只有节点class是动态时就会标记 2 /* CLASS */当节点内容和class都是动态时就会标记 3 /* TEXT, CLASS */当只有节点的style是动态时就会标记 4 /* STYLE */当节点的style和内容都是动态时就会标记 5 /* TEXT, STYLE */当节点的style和class都是动态时就会标记 6 /* CLASS, STYLE */当节点的style和class和内容都是动态时就会标记 7 /* TEXT, CLASS, STYLE */ 以上为vue3效率提升的总结如有不同见解请留言谢谢。
