浏览器工作原理-渲染

HTML+CSS | 2021-01-25 14:03:40 236次 3次

《浏览器工作原理与实践》的阅读笔记整理。


一、进程

当开启一个页签时会有至少四个基本进程工作:

浏览器进程。主要负责界面显示、用户交互、子进程管理,同时提供存储等功能。


渲染进程。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页,排版引擎Blink和JavaScript引擎V8都是运行在该进程中,默认情况下,Chrome会为每个Tab标签创建一个渲染进程。出于安全考虑,渲染进程都是运行在沙箱模式下。


GPU进程。其实,Chrome刚开始发布的时候是没有GPU进程的。而GPU的使用初衷是为了实现3D CSS的效果,只是随后网页、Chrome的UI界面都选择采用GPU来绘制,这使得GPU成为浏览器普遍的需求。最后,Chrome在其多进程架构上也引入了GPU进程。


网络进程。主要负责页面的网络资源加载,之前是作为一个模块运行在浏览器进程里面的,直至最近才独立出来,成为一个单独的进程。


插件进程。主要是负责插件的运行,因插件易崩溃,所以需要通过插件进程来隔离,以保证插件进程崩溃不会对浏览器和页面造成影响


二、输入URL到页面展示

尽管这是一个无聊的问题,但..

浏览器进程检查url,组装协议,构成完整的url

浏览器进程通过进程间通信(IPC)把url请求发送给网络进程

网络进程接收到url请求后检查本地缓存是否缓存了该请求资源,如果有则将该资源返回给浏览器进程

如果没有,网络进程向web服务器发起http请求(网络请求),请求流程如下

    进行DNS解析,获取服务器ip地址,端口(端口是通过dns解析获取的吗?这里有个疑问)

    利用ip地址和服务器建立tcp连接(这个过程很复杂,属于网络的一些知识,准备拿一篇单独整理记录)

    构建请求头信息

    发送请求头信息

    服务器响应后,网络进程接收响应头和响应信息,并解析响应内容

网络进程解析响应流程

检查状态码,如果是301/302,则需要重定向,从Location自动中读取地址,重新进行第4步 (301/302跳转也会读取本地缓存吗?这里有个疑问),如果是200,则继续处理请求。

200响应处理:检查响应类型Content-Type,如果是字节流类型,则将该请求提交给下载管理器,该导航流程结束,不再进行后续的渲染,如果是html则通知浏览器进程准备渲染进程准备进行渲染。

准备渲染进程

浏览器进程检查当前url是否和之前打开的渲染进程根域名是否相同,如果相同,则复用原来的进程,如果不同,则开启新的渲染 进程

传输数据、更新状态

渲染进程准备好后,浏览器向渲染进程发起“提交文档”的消息,渲染进程接收到消息和网络进程建立传输数据的“管道”

渲染进程接收完数据后,向浏览器发送“确认提交”

浏览器进程接收到确认消息后更新浏览器界面状态:安全、地址栏url、前进后退的历史状态、更新web页面


三、渲染

大致的渲染顺序:构建DOM树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。

构建DOM树

125849ec56a3ea98d4b476c66c754f79.png

样式计算

fe9a0ea868dc02a3c4a59f6080aa80b4.png

创建布局树

8e48b77dd48bdc509958e73b9935710e.png

布局计算

计算布局树节点的坐标位置,每个元素的几何坐标位置信息保存在布局树中。


分层

因为页面中有很多复杂的效果,如一些复杂的3D变换、页面滚动,或者使用z-indexing做z轴排序等,为了更加方便地实现这些效果,渲染引擎还需要为特定的节点生成专用的图层,并生成一棵对应的图层树(LayerTree)。

拥有层叠上下文属性的元素会被提升为单独的一层:明确定位属性的元素、定义透明属性的元素、使用CSS滤镜的元素等

需要剪裁(clip)的地方也会被创建为图层


图层绘制

根据绘制列表中的指令进行绘制。Renader 进程的 blink 对外输出 display list 和合成属性。


栅格化(raster)操作

绘制列表只是用来记录绘制顺序和绘制指令的列表,而实际上绘制操作是由渲染引擎中的合成线程来完成的。

a8d954cd8e4722ee03d14afaa14c3987.png

合成和显示

一旦所有图块都被光栅化,合成线程就会生成一个绘制图块的命令——“DrawQuad”,然后将该命令提交给浏览器进程。浏览器进程里面有一个叫 viz 的组件(ipc通信),用来接收合成线程发过来的DrawQuad命令,然后根据DrawQuad命令,将其页面内容绘制到内存中,最后再将内存显示在屏幕上。

3人赞

分享到: