[Vue源码解析] 优化器

14 篇文章 0 订阅

[Vue源码解析] 优化器

优化器作用:在AST中找出静态子树并打上标记

好处:1、每次重新渲染时,不需要为静态子树创建新节点。

2、在虚拟DOM中打补丁(patching)的过程可以跳过。

步骤:1、在AST中找出所有静态节点并打上标记(static:true),若当前节点为静态节点,则其所有子节点也需要为静态节点。

2、在AST中找出所有静态根节点并打上标记(staticRoot:true),AST中从上往下寻找,找到静态节点则标记为静态根节点,由于1的特性,其子节点也为静态节点。

判断是否是静态节点:当模版被解析为AST时,会根据不同的元素类型设置不同的type值

1、node.type === 2为带变量的动态文本节点,不是静态节点

2、node.type === 3为静态文本节点,是静态节点

3、node.type === 1是node为元素节点,此时需要进行分析以下两种情况:a、是否添加v-pre指令,若是则是静态节点(以下统称是或不是)

b、没有动态绑定语法(v-、@、:),没有使用v-if、v-for或v-else指令,不是内置标签(如slot、component),不能是组件,即标签名必须是保留标签,当前节点的父节点不能是带v-for的template标签及节点中不存在动态节点才会有的属性,满足以上条件则为静态标签。

静态根节点注意事项:在标记过程中虽然只有一个文本子节点的元素静态节点或者没有子节点的元素静态节点也是我们要找的静态节点,但由于这两种类型的优化成本超过收益,所以不将其标记为静态根节点。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值