浏览器工作原理-渲染

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

一、进程

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

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

渲染进程。核心任务是将 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树

样式计算

创建布局树

布局计算

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

分层

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

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

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

图层绘制

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

栅格化（raster）操作

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

合成和显示

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