【每日一题】- 2020-08-04 - 浏览器是如何解析 CSS rule 的？

azl397985856 commented 4 years ago

浏览器解析 CSS rule 是从左到右还是从右到左？为什么？

比如：

div > .class1  > .class2

是如何被解析的？先解析 div 还是 .class2? 还是都可能？

lxhguard commented 4 years ago

浏览器解析 CSS rule 是从右到左。 CSSOM本质是一张映射表，可通过document.styleSheets只读样式表集合。若理解为一棵树，则从右向左的遍历方式，等价于从叶子节点开始向上寻找，到目标为止，避免了无效遍历。先解析.class2，再解析.class1，再解析div。

suukii commented 4 years ago

为什么浏览器是从右往左解析 CSS 规则的？

div > .class1  > .class2 {}

首先浏览器在计算一个节点的样式时，它是拿着这个节点去跟样式表中所有的 selector 规则进行比较，找到 match 的规则，应用样式。也就是说，样式表中的大部分规则可能都不是浏览器要找的，所以最好尽早把它们排除掉。

如果浏览器从右往左解析 CSS 规则，可能碰到的第一个选择器 .class2 就跟当前的节点不匹配，那么这个规则就可以放弃了。如果匹配，那就继续往左匹配。

如果浏览器从左往右解析，首先得先遍历 DOM 找到匹配 div 选择器的节点，再继续找到它们有没有子节点匹配 .class1 选择器，...，有可能匹配到最右边时，最后会发现这条规则不是我们想要的，这个过程太耗时间了。

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

azl397985856 / fe-interview

【每日一题】- 2020-08-04 - 浏览器是如何解析 CSS rule 的？ #140

为什么浏览器是从右往左解析 CSS 规则的？