请选择 进入手机版 | 继续访问电脑版

AAA教育论坛

 找回密码
 立即注册
查看: 193|回复: 0

浏览器是怎样解析CSS选择器的?

[复制链接]

5

主题

6

帖子

288

积分

中级会员

Rank: 3Rank: 3

积分
288
发表于 2019-8-12 15:19:13 | 显示全部楼层 |阅读模式
  CSS选择器的解析是从右向左解析的。若从左向右的匹配,发现不符合规则,需要进行回溯,会损失很多性能。若从右向左匹配,先找到所有的最右节点,对于每一个节点,向上寻找其父节点直到找到根元素或满足条件的匹配规则,则结束这个分支的遍历。两种匹配规则的性能差别很大,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点),而从左向右的匹配规则的性能都浪费在了失败的查找上面。
  而在 CSS 解析完毕后,需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree,最终用来进行绘图。在建立 Render Tree 时(WebKit 中的「Attachment」过程),浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果(Style Rules)来确定生成怎样的 Render Tree。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|  

©2019|www.aaa-cg.com.cn 北京漫动者教育科技有限公司|备案号:京ICP备12034770号|监督电话:400-0100-444

快速回复 返回顶部 返回列表