class 选择器为什么比 attribute 选择器快?帮你翻开blink源码。

话不多说,让我们从大家常用的 Node.querySelectorAll 的 blink 源码入手,逐步分析这个问题:

我们调用它时 Node.querySelectorAll 做了哪些事?

翻了下源码,这个函数似乎很简单,其中主要逻辑位于Execute函数中:

Execute函数中,我们可以看到两个逻辑:

  1. 如果 use_slow_scan_ 为true,则会进入到 ExecuteSlow,走慢速查询。
  2. 如果 use_slow_scan_ 为false,如果是class选择器,则会执行 CollectElementsByClassName函数

看起来我们似乎找到了答案?再深究一下。

看起来我们似乎找到了答案,class 选择器为什么比 attribute 选择器快?因为blink中为class选择器做了特殊处理。

而做了啥处理呢?我们来看看函数逻辑,看起来似乎很简单,就是只检查后代所有元素中有class的元素。

而ExecuteSlow慢在哪呢?看代码我们知道,因为他是一个通用的函数,他会处理遍历检查所有后代元素,用所有css规则去做判断,自然会慢于只判断class的CollectElementsByClassName函数。

那么 use_slow_scan_是谁设置的、以什么逻辑设置的呢?

其实看到源码就很简单,当且仅当一个选择器时。

总结:

当且仅当一个选择器时,那么class会比attribute快,因为class选择器心无旁骛只找class,而attribute走的是通用规则处理的逻辑,会有更多逻辑。


最后,祝好。

我是尘码,有其他想从chrome源码找答案的问题,欢迎评论。

也欢迎来我 Fanbook ( 一个国内类似discord的免费平台 ) 来找我吹水聊天 ,频道邀请码如下:

in.fanbook.cn/CIe6NFQD

相关推荐
XIE3925 分钟前
TipKit:开源富文本编辑器套件,一套逻辑,任意风格!
前端·笔记·开源
范什么特西19 分钟前
一些常用名词
开发语言·前端·javascript
晴天1621 分钟前
前端打包工具全景解析
前端
晴天1622 分钟前
Vite vs Webpack 全方位对比
前端·webpack·node.js
体毛旺盛的猿25 分钟前
HarmonyOS开发面试题
前端·华为·harmonyos
anOnion39 分钟前
构建无障碍组件之Landmarks Pattern
前端·html·交互设计
牧瀬クリスだ40 分钟前
前端三件套基础之JS!!!!
前端·javascript
风骏时光牛马43 分钟前
提示词工程:大模型交互的核心塑造技术
前端
单线程_011 小时前
从案例分析 Vue3 Tokenizer+Parser 源码四
前端·javascript·vue.js
1 小时前
Python 图片处理:裁剪缩放至300×200,格式JPG/PNG/GIF,控制大小≤100KB
linux·前端·python