浏览器渲染机制

前言

一直对浏览器的渲染机制都处于一种似懂非懂的状态。看似没什么用的知识点但其实有很大做用。了解浏览器渲染机制能更好的解决性能问题。以及对本身的知识面也是一种提高。此次对浏览器渲染机制进行一次总结。

渲染过程

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外观发生变化，好比颜色，背景色致使浏览器从新渲染的过程称为重绘。

由于在执行JS代码使用的是JS引擎，而渲染页面用的是渲染引擎。当js对DOM进行操做时涉及到了两个引擎的通讯。 并且若是DOM发生变化还会发生重排和重绘。当一次操做了太多dom时。两个引擎的频繁通讯，页面频繁绘制。势必会致使页面卡顿等其余问题