浏览器渲染页面过程
1. 构建DOM和CSSOM树
浏览器渲染页面前需要构建DOM和CSSOM树
浏览器解析过程大概经过：
image
浏览器处理html页面的方式如下图：
image
- 转换：浏览器从磁盘或网络读取HTML的原始节点，并根据文件指定的编码将他们转换成各个字符
- 令牌化：浏览器将字符串转换成 W3C HTML5标准规定的各种令牌（节点）
- 词法分析: 发出的令牌转换成定义其属性和规则的对象
- DOM构建： 根据标记之间的关系构建DOM
整个流程的最终输出的结构如上图的对象模型(DOM),浏览器对页面进行的所有进一步处理都会用它
和处理HTML差不多，我们将收到的CSS规则转换成浏览器能理解和处理的，大概过程如下：
image
浏览器处理css的方式如下:
image
2. 渲染树构建，布局及绘制
DOM和CSSOM构建完成以后，需要合成为渲染树。构建渲染树工作大概如下
- 从DOM树的根节点开始遍历每个可见节点
- 对于每个可见节点，为其找到适配的CSSOM规则规则并应用
- 输出可见节点，连同内容和计算的样式
然后下一步就是布局，布局主要是计算每个节点在页面的大小和确切位置。
最后，将渲染树的每个节点换成屏幕的实际像素(绘制)
总结
浏览器构建步骤如下:
- 处理HTML标记并构建DOM树
- 处理CSS标记并构建CSSOM树
- 将DOM和CSSOM树合并，构成渲染树
- 根据渲染树去布局，并且计算每个节点的大小和位置信息
最后将各个节点绘制到屏幕上
网友评论