作者:蜗牛老湿
转发链接:
整个,特别是直播过程,说服大哥已经总结的小偷们的过程,请访问。
《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》
Vue3核心的Typescript、Proxy响应式、Composition解析代码反复跳转都有很好的句子剖析。让我们总结一下虚拟Dom部分,比较一下React。重写vdom也是vue3性能如此优秀的重要原因。
《Vue真是太好了 壹万多字的Vue知识点 超详细!》 《Vue 3.0 Beta 和React 开发者分别杠上了》 vue 3.0的虚拟DOM
总之,静态标记,upadte性能提高1.3~2倍,SSR提高2~3倍,能怎么办?
编译模板中的静态标记
让我们看一下非常普通的代码。
Div id='app '
H1技术捕捞/h1
p今天天气真好/p
Div{{name}}/div
/div
在复制代码vue2中解析
Function render() {
With(this) {
Return _c('div '{
Attrs: {
Id' 'app '
}
},[_c('h1 '[_v('技术钓鱼')]),_c('p '[_v('今天天气真好')],]
_ s(名称)])
}
}
复制代码中的前两个标记是完全静态的,后续渲染没有变化。Vue2仍使用使用_c新建的vdom。需要在diff中进行比较时,会有一些额外的性能损失
让我们看一下Vue3的分析结果。
import { create vnode as _ create vnode、todisplaystring as _ todisplaystring、open block as _ open block和create
Export function render (_ CTX,_ cache) {
Return (_ openblock(),_ createblock ('div '{ id: ' app ' },[
_createVNode('h1 'null,'用技术触摸鱼'),
_createVNode('p 'null,'今天天气真好'),
_ createvnode ('div 'null,_ todisplaystring),1/* text */)
]))
}
//Check the console for the AST
复制代码最后_createVNode第四个参数1仅在具有此参数时才实际跟踪,静态节点不需要遍历。这是vue3卓越性能的主要来源。看看更复杂的东西。
Div id='app '
H1技术捕捞/h1
p今天天气真好/p
Div{{name}}/div
Div :class='{red:isRed} '捕捞者/div
Button @click='handleClick '刺中了我/button
Input type='text' v-model='name '
/div
复制代码检查结果在线预览
import { create vnode as _ create vnode、todisplaystring as _ todisplaystring、open block as _ open block和create
Export function render (_ CTX,_ cache) {
Return (_ openblock(),_ createblock ('div '{ id: ' app ' },[
_createVNode('h1 'null,'用技术触摸鱼'),
_createVNode('p 'null,'今天天气真好'),
_ createvnode ('div 'null,_ todisplaystring),1/* text */),
_createVNode('div '{
Class: {red:_ctx.isRed}
}、“摸鱼”、2/*类*/)、
_ createvnode ('button '{onclick3360 _ c},'刺我'8 /* PROPS */,['onClick'])
]))
}
//Check the console for the AST
通过复制代码_createVNode,第四个参数中出现了不同的数字,根据以下注释,可以根据其他标签(text、props等)轻松推测:这样,在进行diff时,只需比较text或props即可。不必再进行无所畏惧的props跟踪。好的!参考说服大哥的主席
Exportconst enum修补程序flags {
TEXT=1,//表示具有动态textContent的元素
CLASS=1 1,//表示具有动态类的元素
STYLE=1 2,//表示动态样式(静态样式(例如style='color: red ')也会动态提升)
PROPS=1 3,//表示具有非类/样式动态道具的元素。
FULL_PROPS = 1 << 4, // 表示带有动态键的道具的元素,与上面三种相斥 HYDRATE_EVENTS = 1 << 5, // 表示带有事件监听器的元素 STABLE_FRAGMENT = 1 << 6, // 表示其子顺序不变的片段(没懂)。 KEYED_FRAGMENT = 1 << 7, // 表示带有键控或部分键控子元素的片段。 UNKEYED_FRAGMENT = 1 << 8, // 表示带有无key绑定的片段 NEED_PATCH = 1 << 9, // 表示只需要非属性补丁的元素,例如ref或hooks DYNAMIC_SLOTS = 1 << 10, // 表示具有动态插槽的元素 } 复制代码如果同时有props和text的绑定呢, 位运算组合即可
<div id="app">
<h1>技术摸鱼</h1>
<p>今天天气真不错</p>
<div :id="userid"">{{name}}</div>
</div>
复制代码
import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock("div", { id: "app" }, [
_createVNode("h1", null, "技术摸鱼"),
_createVNode("p", null, "今天天气真不错"),
_createVNode("div", {
id: _c,
"\"": ""
}, _toDisplayString), 9 /* TEXT, PROPS */, ["id"])
]))
}
// Check the console for the AST
复制代码
text是1,props是8,组合在一起就是9,我们可以简单的通过位运算来判定需要做text和props的判断, 按位与即可,只要不是0就是需要比较
位运算来做类型组合 本身就是一个最佳实践,react大兄弟也是一样的 代码
export const PLUGIN_EVENT_SYSTEM = 1;
export const RESPONDER_EVENT_SYSTEM = 1 << 1;
export const USE_EVENT_SYSTEM = 1 << 2;
export const IS_TARGET_PHASE_ONLY = 1 << 3;
export const IS_PASSIVE = 1 << 4;
export const PASSIVE_NOT_SUPPORTED = 1 << 5;
export const IS_REPLAYED = 1 << 6;
export const IS_FIRST_ANCESTOR = 1 << 7;
export const LEGACY_FB_SUPPORT = 1 << 8;
复制代码
事件缓存
绑定的@click会存在缓存里 链接
<div id="app">
<button @click="handleClick">戳我</button>
</div>
复制代码
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock("div", { id: "app" }, [
_createVNode("button", {
onClick: _cache[1] || (_cache[1] = $event => (_c($event)))
}, "戳我")
]))
}
复制代码
传入的事件会自动生成并缓存一个内联函数再cache里,变为一个静态节点。这样就算我们自己写内联函数,也不会导致多余的重复渲染 真是优秀啊
静态提升
代码
<div id="app">
<h1>技术摸鱼</h1>
<p>今天天气真不错</p>
<div>{{name}}</div>
<div :class="{red:isRed}">摸鱼符</div>
</div>
复制代码
const _hoisted_1 = { id: "app" }
const _hoisted_2 = _createVNode("h1", null, "技术摸鱼", -1 /* HOISTED */)
const _hoisted_3 = _createVNode("p", null, "今天天气真不错", -1 /* HOISTED */)
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock("div", _hoisted_1, [
_hoisted_2,
_hoisted_3,
_createVNode("div", null, _toDisplayString), 1 /* TEXT */),
_createVNode("div", {
class: {red:_ctx.isRed}
}, "摸鱼符", 2 /* CLASS */)
]))
}
复制代码
vue3和react fiber的vdom
很多人吐槽越来越像React,其实越来越像的api,代表着前端的两个方向
Vue1.x
没有vdom,完全的响应式,每个数据变化,都通过响应式通知机制来新建Watcher干活,就像独立团规模小的时候,每个战士入伍和升职,都主动通知咱老李,管理方便
项目规模变大后,过多的Watcher,会导致性能的瓶颈
React15x
而React15时代,没有响应式,数据变了,整个新数据和老的数据做diff,算出差异 就知道怎么去修改dom了,就像老李指挥室有一个模型,每次人事变更,通过对比所有人前后差异,就知道了变化, 看起来有很多计算量,但是这种immutable的数据结构对大型项目比较友好,而且Vdom抽象成功后,换成别的平台render成为了可能,无论是打鬼子还是打国军,都用一个vdom模式
碰到的问题一样,如果dom节点持续变多,每次diff的时间超过了16ms,就可能会造成卡顿(60fps)
Vue2.x
引入vdom,控制了颗粒度,组件层面走watcher通知, 组件内部走vdom做diff,既不会有太多watcher,也不会让vdom的规模过大,diff超过16ms,真是优秀啊 就像独立团大了以后,只有营长排长级别的变动,才会通知老李,内部的自己diff管理了
React 16 Fiber
React走了另外一条路,既然主要问题是diff导致卡顿,于是React走了类似cpu调度的逻辑,把vdom这棵树,微观变成了链表,利用浏览器的空闲时间来做diff,如果超过了16ms,有动画或者用户交互的任务,就把主进程控制权还给浏览器,等空闲了继续,特别像等待女神的备胎
diff的逻辑,变成了单向的链表,任何时候主线程女神有空了,我们在继续蹭上去接盘做diff,大家研究下requestIdleCallback就知道,从浏览器角度看 是这样的
大概代码
requestIdelCallback(myNonEssentialWork);
// 等待女神空闲
function myNonEssentialWork (deadline) {
// deadline.timeRemaining()>0 主线程女神还有事件
// 还有diff任务没算玩
while () > 0 && > 0) {
doWorkIfNeeded();
}
// 女神没时间了,把女神还回去
if ( > 0){
requestIdleCallback(myNonEssentialWork);
}
}
复制代码
Vue3
这里的静态提升和事件缓存刚才说过了,就不说了,其实我也很纳闷,这些静态标记和事件缓存,React本身也可以做,为啥就不实现了,连shouldComponentUpdate都得自己定义,为啥不把默认的组件都变成pure或者memo呢,唉,也许这就是人生把
React给你自由,Vue让你持久,可能也是现在国内Vue和React都如此受欢迎的原因把
Vue3通过Proxy响应式+组件内部vdom+静态标记,把任务颗粒度控制的足够细致,所以也不太需要time-slice了
人生啊,小孩才天天研究利弊, 成年人选择我都要,也期待React17的新特性
直播小细节
最后提问期间,强如尤大,也没法回避发量的问题,可惜没推荐啥护发素,我仔细看了一下,好像vue3发布后,尤大发际线确实提升了 囧 祝大家技术提升的同时也能有乌黑的秀发
作者:蜗牛老湿
转发链接: