浏览器渲染
浏览器渲染可大体分为五部,分别是:构建dom树、构建css树、构建渲染树、节点布局、页面渲染。
浏览器组件
- js解析器 用于解析执行的javaScript代码
- 渲染引擎 负责显示请求的内容。比如请求到HTML, 它会负责解析HTML
- UI后端 绘制基础元件。
浏览器的进程和线程
Chrome浏览器会为每个页面创建一个渲染进程,防止一个页面崩溃导致其它页面也崩溃。
-
GUI渲染线程
渲染线程负责渲染浏览器界面的HTML元素。在javascript引擎运行脚本期间,GUI渲染线程会处于挂起状态。 -
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.渲染
将渲染树的节点信息转换成像素绘制出来。