Vue底层判断标签的性能优化方法

HaoOuBa
2021-06-28 / 2 评论 / 389 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年07月01日,已超过515天没有更新,若内容或图片失效,请留言反馈。

在vue中,如果写div、span等正常的html标签,vue会解析成传统的html标签,但当写不是这些标签的时候,vue会认为他是一个组件,例如:<Custom></Custom>。是如何做到这种判断的呢,首先自己来实现一个这样的判断

const tags = 'div,span,img,a'.split(",")
function checkTag(tag) {
    return tags.some(item => item === tag)
}
console.log(checkTag('Custom'));  // false
console.log(checkTag('div'));  // true
console.log(checkTag('a'));  // true

这里的实现方案有很多,可以用for、some、forEach等,但是都是离不开循环,思考这样的一个问题,传入一个a,a在字符串最后一个位置,所以会循环4次来判断是否包含a,如果页面上的标签极多,甚至会有上万次的循环

再来查看Vue实现这个的方式,大致源码如下

const tags = 'div,span,img,a'
function makeMap(str) {
    var map = Object.create(null);
    var list = str.split(',');
    for (var i = 0; i < list.length; i++) {
        map[list[i]] = true;
    }
    return function (val) {
        return map[val];
    }
}
const isHtmlTag = makeMap(tags)
isHtmlTag('div')
isHtmlTag('Custom')
isHtmlTag('a')

这里可以看出,实现出一个柯里化函数,并且也是一个闭包状态。此时,在第一次调用时,会循环一次,后续不论在去判断什么标签,都不会再去循环,因为第一次的循环结果利用闭包已经存在了内存里,这就是闭包能带来的性能优化

7

评论 (2)

取消
  1. 头像
    测试
    Windows 10 · Google Chrome

    adwd

    回复
  2. 头像
    真不错
    Windows 10 · Google Chrome

    我已经成为粉丝了。

    回复