为什么排版引擎解析 CSS 选择器时一定要从右往左解析?
首先我们要看一下选择器的「解析」是在何时进行的。
主要参考这篇「 How browsers work」(http://taligarsiel.com/Projects/howbrowserswork1.htm)来看,浏览器渲染的过程以 WebKit 为例大致如下:
HTML 经过解析生成 DOM Tree(这个我们比较熟悉);而在 CSS 解析完毕后,需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree,最终用来进行绘图。Render Tree 中的元素(WebKit 中称为「renderers」,Firefox 下为「frames」)与 DOM 元素相对应,但非一一对应:一个 DOM 元素可能会对应多个 renderer,如文本折行后,不同的「行」会成为 render tree 种不同的 renderer。也有的 DOM 元素被 Render Tree 完全无视,比如 display:none 的元素。
在建立 Render Tree 时(WebKit 中的「Attachment」过程),浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果(Style Rules)来确定生成怎样的 renderer。对于每个 DOM 元素,必须在所有 Style Rules 中找到符合的 selector 并将对应的规则进行合并。选择器的「解析」实际是在这里执行的,在遍历 DOM Tree 时,从 Style Rules 中去寻找对应的 selector。
因为所有样式规则可能数量很大,而且绝大多数不会匹配到当前的 DOM 元素(因为数量很大所以一般会建立规则索引树),所以有一个快速的方法来判断「这个 selector 不匹配当前元素」就是极其重要的。
如果正向解析,例如「div div p em」,我们首先就要检查当前元素到 html 的整条路径,找到最上层的 div,再往下找,如果遇到不匹配就必须回到最上层那个 div,往下再去匹配选择器中的第一个 div,回溯若干次才能确定匹配与否,效率很低。
逆向匹配则不同,如果当前的 DOM 元素是 div,而不是 selector 最后的 em,那只要一步就能排除。只有在匹配时,才会不断向上找父节点进行验证。
但因为匹配的情况远远低于不匹配的情况,所以逆向匹配带来的优势是巨大的。同时我们也能够看出,在选择器结尾加上「*」就大大降低了这种优势,这也就是很多优化原则提到的尽量避免在选择器末尾添加通配符的原因。
为什么排版引擎解析 CSS 选择器时一定要从右往左解析?的更多相关文章
- css选择器选择顺序是从右往左的,为什么?
https://segmentfault.com/q/1010000000713509 为什么 CSS 选择器解析的时候是从右往左? CSS 的后代选择器本身就是一种在标准里面不那么推荐的方式. 首先 ...
- 浏览器如何解析css选择器?
浏览器会『从右往左』解析CSS选择器. 我们知道DOM Tree与Style Rules合成为 Render Tree,实际上是需要将Style Rules附着到DOM Tree上, 因此需要根据选择 ...
- JavaScipt 源码解析 css选择器
css1-css3提供了很多选择器,总得来说分为几大类: 群组选择器:逗号"," 简单选择器:ID,标签,类,属性,通配符 关系选择器:孩子,后代,兄弟,相邻 伪类选择器:动作伪类 ...
- JSON.parse 解析json字符串时,遇字符串换行符,解析失败
今天遇到json字符串转对象时报错了,发现有个字符串有换行符,仔细找了原因. 结果是因为JSON.parse转json字符串时遇到一些特殊字符需要先转义,如图所示 然后尝试了各路大神介绍的办法,均不适 ...
- 用JDOM解析XML文件时如何解决中文问题?如何解析?
import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import ja ...
- 30个最常用css选择器解析
转自:http://www.cnblogs.com/yiyuanke/archive/2011/10/22/CSS.html 你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远 ...
- CSS选择器优先级总结
CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
- CSS选择器 + Xpath + 正则表达式整理(有空再整理)
选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...
- 你须知道的30个CSS选择器 »
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
随机推荐
- HDU-1087-Super Jumping! Jumping! Jumping!(线性DP, 最大上升子列和)
Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 ...
- 丢用lamp手动安装apache php mysql
Centos7环境下. 使用lamp环境无法正常显示出thinkphp站点的内容,一气之下,选择手动安装 第一步: 安装apache php 和php连接数据库的工具php-mysql [root@ ...
- C#数组,List,Dictionary,IQueryable,IEnumerable的相互转换
本篇文章会向大家实例讲述以下内容: 将数组转换为List 将List转换为数组 将数组转换为Dictionary 将Dictionary 转换为数组 将List转换为Dictionary 将Dicti ...
- Python unittest第一篇:基础入门+命令行编译
unittest单元测试框架最初受JUnit启发,与其他语言的主要单元测试框架具有相似的风格. 它支持测试自动化,支持开启或关闭某个测试,支持结合测试.另外它可以生成各个单元测试的报告.为了实现以上功 ...
- MySQL之试图、触发器、事务、存储过程、函数
阅读目录 一.视图 二.触发器 三.事务 四.存储过程 五.函数 六.流程控制 一.视图 视图是一个虚拟表(非真实存在),是跑到内存中的表,真实表是硬盘上的表,怎么就得到了虚拟表,就是你查询的结果,只 ...
- Mac下安装eclipse(Mac 10.12/JDK/tomcat)
1.到官网https://www.eclipse.org/downloads/eclipse-packages/下载安装包 2.安装 注意:安装ecllipse时一定要安装JDK先,最新版本的ecli ...
- redis的key
Redis支持的数据模型: Redis支持的数据类型: redis的key: Redis对key的操作: 执行命令cd /usr/local/redis进入到redis的启动目录,执行./redis ...
- OGNL取Map,List,Set的值
用到的类有: 相应代码: public class Dog { private String name; public Dog(){ } public Dog(String name){ this.n ...
- Struts dispatchAction
在Struts中定义动态Action,不用定义多个Action,可以实现一个action,多个跳转. 在定义时,继承DispatchAction,并定义parameter的名字 在jsp页面选择act ...
- java中的this和super(构造函数)
1.this:表示当前对象 常用的代码: public class A{ private String name; public void setName(String name){ this.nam ...