浏览器渲染机制
当浏览器请求返回一个文档后,需要对其进行多个步骤的处理,才能正确渲染到页面上
HTML解析
- 解码:首先将二进制数据根据文件指定编码方式转换为字符串,也就是html代码
- 词法解析:将字符串分割成为一个个标签
- 语法解析:根据html代码规则,将标签进行解析,理解每个标签的含义
- 构建dom树:将之前生成的标签和解析后的结果结合生成节点,每生成一个就添加到dom树中
CSS解析
- 类似于html解析,解码-->词法解析-->语法解析,生成CSSOM树
生成渲染树
将DOM树和CSSOM树结合,每个节点对应其css样式,生成渲染树
进行布局
将渲染树,根据浏览器尺寸,计算每个元素在网页上的对应位置和样式
绘制
将布局后的结果,绘制到页面上。一般是布局完成一个节点就绘制这个节点。