浏览器工作原理个人理解 | | CSS 解析过程总结

一、浏览器工作原理部分

HTML、CSS、JavaScript解析是三个需要处理的部分，为了加快页面的渲染，浏览器的渲染引擎部分，会有自己的渲染逻辑顺序。目的是为了快速的提升页面渲染速度。

浏览器接收到HTML文件后的动作：

1、HTML解析成DOM树

2、CSS解析成CSSOM树

3、若写了JavaScript代码块，且非async，则中断DOM构建，反过来执行JS，因为JS可能会修改DOM的结构内容

这是网页文件送达后，三个关键资源的首要阶段，也叫关键阶段。
之后的过程，会根据不同浏览器的内核而不同。大致总结一下：

DOM和CSSOM树会用做材料，来构建渲染树，它结合了2个树中的数据。注意这个构建渲染树的阶段有优化，会把不显示在浏览器视口的元素全部"砍掉"，比如 head meta script ，设置 display ：none的结点等等。

渲染树构建完成，就进行 布局阶段：
利用渲染树上的结点数据，计算每个元素在视口上的位置。

最后进行painting阶段：
开启渲染API，进行像素渲染。根据个人理解，渲染可能使用的是opengl接口，应该使用的是share buffer，把像素放在内存中某处，然后opengl直接去那个地方取像素进行渲染。

二、CSS 解析过程总结

CSS 是网页加载慢的源头，因此优化CSS代码很重要。

CSSOM树的结点值是 选择器，进行查找赋值的时候，若是单一选择器，直接赋给root结点 ；若是嵌套使用的选择器，就 “自右向左" 查找进行结点的赋值。