CSS 为何从右向左解析

今天读了一篇探究CSS解析原理的文章，从中学习到了很多的知识，在此写一下个人对CSS为何从右向左解析的简单理解。

渲染过程

首先，解析器的顺序是【从右向左】执行，为什么是【从右向左】执行？这就要说一下浏览器的渲染过程。

上图是webkit浏览器的渲染过程，可以看到HTML和CSS是两条分支，最后在DOM元素生成了DOM树，CSS生成了对应的StyleRules时，两者开始结合，在结合(Attachment)时，就会产生一系列的反应过程。这个过程简单点说就是解析选择器遍历DOM树找到对应的DOM元素，将对应的规则(StyleRule)给DOM树【挂上】重复这个过程，直到所有样式和DOM一一对应，最终两个树结合产生Render Tree。

从这个过程中我们可以发现，如果我们先找根元素也就是从【左方向】开始找，如果DOM树很复杂的话，我们需要一条一条的从上往下滤，这样就会造成一个结果，很多时候我们的过滤是无效的。

举例说明

举个例子：【水果】代表根元素，能吃皮的算一类不能吃皮的算一类这代表子元素 ，苹果 香蕉 橘子代表子子元素。

如果从【水果】也就是【左】方向开始找，我们就会找3次。但是如果从【橘子】开始找，我们只需要一次就好了。

这是一个最简单的例子，根据这个例子我们也能看出，我们子元素只能有一个父元素，但是父元素可以有一堆子元素，所以还是从子元素，也就是【右】方向找会节约时间。

结束

今天讲的只是最简单的结构该如何理解。【内联样式】、【CSS优先级的关系】都会影响最后生成的Render Tree。

关注【前端小白的成长记录】每天一篇优质【小技巧】文章
后台回复你想看的资料，比如React。我会找到相关的【视频】和【电子书】发给你。