假设最后一个css元素是html标签，则选择器解析从左往右的提案

Invoker 发布于2019-08-30 15:43 / 3411人阅读

摘要：假如有个不在中的，就有次的分支遍历，而符合条件的只有个，会损失很多性能。提案大部分书写习惯是不想每个标签都加，可以用不同标签选择出来的。所以提案如下假设最后一个元素是标签，而父元素有或选择器时，则选择器解析从左往右的，其他情况还是从右往左。

现状

现在浏览器css匹配核心算法的规则都是是以 right-to-left 方式匹配节点的。

如.root .sub span {...}，浏览器渲染方式是 span -> .sub -> .root
它的读取顺序变成：先找到所有的span，沿着span的父元素查找.sub,再找.root，中途找到了符合匹配规则的节点就加入结果集；如果直到根元素html都没有匹配，则不再遍历这条路径，从下一个span开始重复这个过程。

举例

如果整个html只有一个span标签，那 right-to-left 方式的确是最快的，但是往往大部分网页都不只一个span标签，多个span标签将会有很多无效的匹配，那这时是不是 left-to-right 会更好一点。

案例：

.root .sub span {}

right-to-left 解析
先找到所有的最右节点 span，有4个，对于每一个 span，向上寻找节点发现不是.sub,在查找上上节点，直到找到html，发现没有符合的。再从下一个span开始重复这个过程。
上面情况有4个span至少有4个分支的往上遍历。假如有 1000 个不在.sub中的span，就有 1000 次的分支遍历，而符合条件的只有1个，会损失很多性能。

left-to-right 解析
从 .root 开始,遍历所有子节点，如果没有找到.sub，回溯到上个节点接着遍历，直到找到.sub，再遍历.sub下的子节点找到span结束。
上面情况1次就能找到符合条件的span。

上面案例明显 left-to-right 比 right-to-left 解析效率更高。

当然也有情况是，如果.root下面有很多复杂子节点，需要遍历与回溯很多次，而.root外的span不多，则 right-to-left 解析效率更高。

提案

大部分书写习惯是不想每个html标签都加class name，可以用不同html标签选择出来的。如下所示：

#sub span{}
#sub label{}
#sub>div{}

先找到#sub再找html标签的话，css解析效率会高些。
那么 left-to-right 比 right-to-left 解析效率高。
所以提案如下：

假设最后一个css元素是html标签，而父元素有ID或Class选择器时，则选择器解析从左往右的，其他情况还是从右往左。

Ps：这里本妹子的一个想法，欢迎各位小伙伴们一起讨论，如果大部分都觉得有道理的话，我想试着向w3c组织提出建议需求。

其他链接

原文地址：https://raoenhui.github.io/css/2019/03/30/left-to-right

Happy coding .. :)

GPU云服务器云服务器元素选择器 css选择器 js 子类元素选择器基础选择器css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116048.html

从css到页面样式渲染

摘要：对应多种语法规则可以为指定样式。渲染页面绘制到屏幕后，页面结构的改变也有可能导致渲染树重新计算，其中重排和重绘是最耗时的部分。写了这么多class,color,background,display...; 也许有时候会疑惑，怎么就显示在页面上，改变元素的样式。本文简明介绍整个解析，匹配，渲染过程 css 描述 css 是Cascading Style Sheets的简写，是一种样式...

Nekron 2019-08-30 15:43 评论0 收藏0
校招进行时（四）---css基础

摘要：在中，使用标准盒模型描述这些矩形盒子中的每一个。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。最常见的有简称和简称。其中列是真正显示文档内容的元素。同时其还支持列的偏移，即可以不从第一列开始，将某几列作为空隙。恩，小菜鸟又来了，上篇文章在这，话不多说，这次罗列总结一下css基础知识，和我一样的菜鸟可以看看。引入方式 css的引入方式主要有以下几种：外...

isLishude 2019-08-29 12:59 评论0 收藏0
WEB前端面试题汇总（CSS）

摘要：默认值，没有定位，元素出现在正常的文档流中。生成粘性定位的元素，容器的位置根据正常文档流计算得出。和属性的异同共同点对内联元素设置和属性，可以让元素脱离文档流，并且可以设置其宽高。 position的值， relative和absolute分别是相对于谁进行定位的？、relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。、absolute:生成绝对定位，相对于最近一...

qpwoeiru96 2019-08-29 12:39 评论0 收藏0
前端培训-中级阶段（6）- jQuery元素节点操作（2019-07-18期）

摘要：已存在节点是移动，新节点是新增。链式操作对象为。将他们的父节点移除。从中删除所有匹配的元素。一个布尔值或者指示事件处理函数是否会被复制。以上版本默认值是一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/...

taoszu 2019-08-02 15:24 评论0 收藏0
前端培训-中级阶段（6）- jQuery元素节点操作（2019-07-18期）

摘要：已存在节点是移动，新节点是新增。链式操作对象为。将他们的父节点移除。从中删除所有匹配的元素。一个布尔值或者指示事件处理函数是否会被复制。以上版本默认值是一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/...

tigerZH 2019-08-23 18:22 评论0 收藏0