浏览器渲染

浏览器渲染

浏览器渲染可大体分为五部，分别是：构建dom树、构建css树、构建渲染树、节点布局、页面渲染。

浏览器组件

• js解析器 用于解析执行的javaScript代码
• 渲染引擎 负责显示请求的内容。比如请求到HTML, 它会负责解析HTML
• UI后端 绘制基础元件。

浏览器的进程和线程

Chrome浏览器会为每个页面创建一个渲染进程，防止一个页面崩溃导致其它页面也崩溃。

1. GUI渲染线程
   渲染线程负责渲染浏览器界面的HTML元素。在javascript引擎运行脚本期间，GUI渲染线程会处于挂起状态。

2. JS引擎线程和GUI渲染线程是互斥的，因为js可以操作dom，如果在js修改元素的同时渲染界面，可能导致渲染线程前后获得的元素数据不一致。

渲染过程
1.DOM树的构建
一：首先从网络或者磁盘下读取出HTML原始字节码，解析器通过设置的编码模式，将字节码解析为相应字符串。
3C 62 6F 11 3D… —> ………
二：通过词法分析器，将字符串解析成Token，Token再转换成Node节点。
三：通过深度遍历过程，将节点构建成DOM树。

2.CSSOM树的构建
未构建完成的CSSOM树是不准确的，浏览器必须等到CSSOM树构建完毕后才能使用。所以，CSS的加载速度与构建CSSOM树的速度会直接影响首屏渲染的速度，因此默认情况下CSS被视为阻塞的资源。应当尽早尽快下载到客户端，以便缩短首次渲染时间。

• 当浏览器遇到一个script标签时，DOM树的构建会被暂定，直到js代码执行完毕。
• DOM树构建和CSSOM树构建可以同时进行。
• js会修改css样式,影响CSSOM树的最终结果，如果js试图在浏览器还未完成cssom树构建时操作css样式，js也要等待cssom树构建完成才能操作。
  出自：https://zhuanlan.zhihu.com/p/74792085

3.渲染树的构建
DOM树上每个节点对应着每一个元素，CSSOM树上每一个节点对应每一个元素的样式。DOM/CSSOM树不能够用于用排版和渲染。要根据DOM树和CSSOM树构建Render树。
一些不用渲染的节点如：html、script会被忽略掉，不作为渲染树的节点。设置的display:none属性的节点，也会被忽略掉。

4.布局
对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置和大小。

5.渲染
将渲染树的节点信息转换成像素绘制出来。