CSS渲染过程

webkong 12/19/2016 CSS

#CSS 渲染

css 是从右向左解析的

一开始我看到这个从右向左解析渲染的时候，也是呆了一下，但是想想这确实是目前效率最高的方式了。

OK，开始。

浏览器的一般结构

1.用户界面 - 用户使用的界面：地址栏，书签，前进后退等

2.浏览器引擎 - 在用户界面和渲染引擎之间传递指令

3.渲染引擎 - 负责显示请求的内容，解析一些 HTML、CSS 并显示到屏幕

4.网络层 - 网络调用，比如：http、websocket 等

5.JavaScript 解释器 - 用于解释执行 JavaScript 代码

6.用户界面后端 -

7.数据存储 - 浏览器需要将持久化的数据存储在硬盘上。不如 Cookie、localstroge 等

我主要讨论一下渲染引擎

渲染引擎从网络层获取到请求问道的内容之后，就会执行如下基本流程：

1.渲染引擎开始解析 HTML 文档，并将各个标记逐渐转化成 DOM 树上的 DOM 节点。同时，解析外部 CSS 文件以及样式元素中的样式数据。等所有 CSS 文件获取成功后，结合内部style和行内样式，生成 render 树，render 树包含了每个 DOM 的节点的样式信息。

2.结合 DOM 树和 render 树来绘制页面。

CSS 是从右向左解析的

构建 render 树的过程是遍历 dom 树，每次拿到一个 dom 节点，然后遍历所有的样式规则，查找与当前节点匹配的规则，最后将所有匹配的规则中定义的样式写入到一个 render 对象，再将 render 对象挂到 render 树上（建立对象和 render 树的联系）。如图：

也就是说，每一个 dom，已知的是 class，id 和 tabName <a id="aa" class="bb" href=""> ，但是匹配的规则可能有成千上万条，渲染引擎需要从中找到符合条件的 1 条或者多条（数量不会很多）。

由于每条规则都有很多嵌套例如： #content .box p{} .title a{}

假如采用从左向右的方式读取 CSS 规则，那么大多数的规则读取到后面发现是不匹配的，会浪费很多时间在无用的匹配上。

所以，采用从右向左匹配就会在发现最后边或者次右边的选择器不匹配，整个规则就可以跳过了。

在 css 模块化了之后，模块打包到一个 css 文件中了。比如：

.model_a a{...}
.model_b a{...}
.model_c a{...}
.model_d a{...}

1
2
3
4
5

浏览器会遍历所有的 a，所以加大了匹配时间，所以，提倡不用 tag 标签来定义样式，一律用类 .class