走进浏览器内部—剖析浏览器是如何工作的（中）

趁热打铁，今天继续昨天的内容。分享有关浏览器的内容。可能我们即使了解浏览器的工作原理对工作帮助也不是很大，其实不言，如果了解浏览器的机制，我们就可以避免一些可能会影响应用性能的陷阱了。

在下图中，我们可以了解浏览器是如何解析样式表，然后生成 CSS 树的，

CSS 树，每一个{}都可以看作一个 CSSRul 对象，有这个规则适用范围（selectors 通过选择器来确定）和规则的内容（声明规则具体内容）

解析 Html 和 css 过程是并行，也就是同时进行的，在这个过程中，javascript 是可以影响 CSS 和 Html 的解析的过程。

将 CSS 对象和 DOM 对象相结合，也就是将 CSS 规则（样式）应用到 DOM 对象上，CSSRule 规则表述了他所应用的 DOM 在屏幕上呈现模样。

所谓渲染树，其实并不是一颗，渲染对象树是基于 DOM 对象，用来确定 DOM 层级关系和 DOM 的用途，如用途是图片还是文本，渲染样式树，决定了 DOM 对象的模样，例如背景色，高度，尺寸，文字颜色。渲染布局树，决定了渲染对象在屏幕上的位置，这里包括 z 轴上位置（也就是层叠关系），LineBox 用于包裹文本。

有关什么样的内容不会参与渲染，显示到屏幕上，上图说很清楚，不赘述了。

计算样式，也就是计算机通过计算渲染对象的样式和尺寸的过程，每个 DOM 对象都有自己的默认样式，如果有在样式表中，有有关此渲染对象的样式规则，这些规则也会应用到或覆盖原有的样式。最后会检查是渲染对象否有内联样式，内联样式会覆盖掉之前的声明相同的样式。

样式中所谓计算，（这里指 compute的）是根据 margin padding border height width 这些属性以及根据 box 模式来确定Dom 对象的位置。