前言
一直对浏览器的渲染机制都处于一种似懂非懂的状态。看似没什么用的知识点但其实有很大作用。了解浏览器渲染机制能更好的解决性能问题。以及对自己的知识面也是一种提升。这次对浏览器渲染机制进行一次总结。
渲染过程
1.浏览器解析html标记后生成DOM树
2.浏览器解析css标记后生成Cssom树
3.将DOM树与CSSOM树合并生成渲染树
4.浏览器根据生成的渲染树进行布局，也就是确定每个节点的位置及大小
5.浏览器对页面进行绘制
DOM树构建过程
1.当我们打开网页时，浏览器开始请求对应html文件。不过在计算机底层此时为0和1的字节码。这一步中浏览器将这些字节数据解析成字符串。也就是我们写的代码。
2.生成字符串后，浏览器根据特定词法分析，将字符串转化为标记。这些标记构成代码的最小单位。
例如：<div>111</div> <div>被解析为一个div标签，111被解析为标签内文本，</div>被解析为div结束标签
3.标记解析完成后，浏览器将这些标记转化为节点(Node)。并根据节点间的关系生成dom树
- 解析过程
二进制字节码=>字符串=>标记=>节点=>Dom树
CSSOM树构建过程
构建过程同DOM树
- 解析过程
二进制字节码=>字符串=>标记=>节点=>Dom树
生成渲染树
- 渲染过程
生成渲染树后根据渲染树进行布局。然后GPU将页面绘制到屏幕中。
tip:display:none的节点不会绘制
为什么js操作dom耗性能
- 重排
因为dom显示隐藏，位置变化，大小变化导致浏览器重新渲染的过程称为重排，别名回流。
- 重绘
因为dom外观发生变化，比如颜色，背景色导致浏览器重新渲染的过程称为重绘。
