珠海自适应网站设计,雅安做网站的公司,wordpress消息推送,手机虚拟空间1、静态提升 2、预字符串化 3、缓存事件处理函数 4、Block Tree 5、PatchFlag
一、静态提升 在vue3中的app.vue文件如下#xff1a; 在服务器中#xff0c;template中的内容会变异成render渲染函数。 最终编译后的文件#xff1a; 1.静态节点优化
那么这里为什么是两部分…1、静态提升 2、预字符串化 3、缓存事件处理函数 4、Block Tree 5、PatchFlag
一、静态提升 在vue3中的app.vue文件如下 在服务器中template中的内容会变异成render渲染函数。 最终编译后的文件 1.静态节点优化
那么这里为什么是两部分呢因为这就是vue3中的静态节点优化。(注img元素是纯静态节点);因为静态节点没有绑定数据等是不会响应式发生变化的那么就不需要放入render函数每次渲染的所以编译器将静态节点提升到render函数外。 在vue2中会将所有的节点都放入render函数所以对性能会相对影响。
// vue2 的静态节点
render(){createVNode(h1, null, Hello World)// ...
}// vue3 的静态节点,不在渲染函数中这样静态节点只是被创建一次
const hoisted createVNode(h1, null, Hello World)
function render(){// 直接使用 hoisted 即可
}
2.静态属性提升
不仅仅是静态节点那么对于一些绑定了数据等动态节点编译器也会智能化监控。
div classuser{{user.name}}
/div//可以把属性对象提提取出来
const hoisted { class: user }function render(){createVNode(div, hoisted, user.name)// ...
}
如上代码该节点虽然绑定了动态数据但是它的css样式属性是静态的。 所以会将该节点的属性进行提升从而减少了内存占用。
二、预字符串化
templatediv classmenu-bar-containerdiv classlogoh1logo/h1/divul classnavlia hrefmenu/a/lilia hrefmenu/a/lilia hrefmenu/a/lilia hrefmenu/a/lilia hrefmenu/a/li/uldiv classuser :classuser.name// 只有这里是动态的其余都是静态的span :classuser.name{{ user.name }}/span/div/div
/template
如果一个组件内容出现大量连续的形态节点20个时如果用render函数去一个个渲染将损耗大量性能但是vue3中会将这些静态内容字符串化渲染时直接返回静态的节点。
编译结果 vue2中会有大量的虚拟节点 vue3中直接变成一个字符串了。SSR中作用非常明显。 三、缓存事件处理函数
button clickcountplus/button
// vue2 中onClick每次都是函数
render(ctx){return createVNode(button, {onClick: function($event){ctx.count;}})
}// vue3 中会缓存函数有的话直接返回没有的进行缓存
render(ctx, _cache){return createVNode(button, {onClick: cache[0] || (cache[0] ($event) (ctx.count))})
}
如上代码当我们绑定事件时vue2会在每次触发函数时去调取函数而vue3中会将函数进行缓存触发时查看是否有缓存没有就进行缓存后续触发时直接拿取缓存中的函数从而减少性能损耗。
四、Block Tree Vue.js 2.x 的数据更新并触发重新渲染的粒度是组件级的单个组件内部 需要遍历该组件的整个 vnode 树。在 2.0 里渲染效率的快慢与组件大小成正相关组件越大渲染效率越慢。并且对于一些静态节点又无数据更新这些遍历都是性能浪费。 Vue.js 3.0 做到了通过编译阶段对静态模板的分析编译生成了 Block tree。 **Block tree 是一个将模版基于动态节点指令切割的嵌套区块每个 区块内部的节点结构是固定的每个区块只需要追踪自身包含的动态节点。**所以在 3.0 里渲染效率不再与模板大小成正相关而是与模板中动态节点的数量成正相关。
formdivlabel账号/labelinput v-modeluser.loginId //divdivlabel密码/labelinput v-modeluser.loginPwd //div
/form
如上代码当一代码的结构基本稳定但是部分结构会变化时 注vue2会挨个挨个比较前后变化的节点数当发现不一样时重新渲染。 而vue3中依托强大的编译器会在首节点的‘block’节点中记录当前树的哪部分是动态的然后响应时直接寻找动态的节点进行比对跳过一些节点不用每个节点都对比从而大大提升了渲染效率。
左block:[inopu1,input2]
右block:[inopu1,input2]
五、PatchFlag比对标记
前面说的是跳过一些静态节点PatchFlag说的是对比一个具体的节点的优化方式这个节点哪块是动态的
div classuser :classuser.namespan :classuser.name{{ user.name }}/span
/div
有如上代码我们会发现这一段代码中帮顶了三个动态数据那么vue3的编译器就会在render函数中进行标记。 vue2中需要对比元素类型、属性、再递归子节点vue3中只需要根据表示对比元素内容。
