从输入url到页面展示，这期间发生了什么

这是一道常考的面试题，是对整个页面加载过程、渲染过程的一个考察，学习了相关资料，为了加深理解记忆，总结如下。

1.判断是搜索内容还是输入的url

如果是搜索内容就通过默认搜索引擎搜索相关内容，并跳转到对应的搜索结果页

2.加载新页面前，触发当前页面的beforeunload

如果当前页面没有注册beforeunload事件或同意了继续后续流程，则进入后续流程。如果用户通过beforeunload取消离开页面，则停止后续流程，留在当前页面

3.请求页面资源

浏览器进程通过进程间通信（IPC）将url发送给网络进程

（1） 构建请求行

请求方式 请求地址 协议

（2）查找缓存

如果查找浏览器中存在缓存，如果存在且没有过期则直接返回，如果查询失败则进入网络请求过程

（3）准备IP地址和端口

将域名解析成对应的ip，首先查询DNS缓存服务器，如果存在就返回对应的ip，如果没有就查询域名服务器
如果url中没有特别指明就是80端口，如果指明就是指明的端口

（4）等待TCP队列

同一个域名同时最多只能建立 6 个 TCP 连接，如果在同一个域名下同时有 10 个请求发生，那么其中 4 个请求会进入排队等待状态，直至进行中的请求完成。

（5）三次握手，建立TCP连接

（6）发送http请求（请求行 请求头 请求体）

（7）服务器处理请求

（8）服务器返回请求

（9）断开TCP连接

网络进程获取到服务器返回的相应行，响应头后开始解析，如果发现服务器返回的301、302，则从响应头中读取location字段重定向，从新开始上述过程
如果请求是200，浏览器会根据Content-Type 字段类型进行对应的处理
如果是HTML，网络进程会通知浏览器进程可以准备渲染了

4.准备渲染

浏览器进程收到网络进程发送的准备渲染通知后，会通知渲染进程准备提交文档了，这个时候渲染进程开始从网络进程获取请求的资源，数据传输完成之后，渲染进程向浏览器进程发送确认提交，浏览器进程收到后，开始更新浏览器状态、url地址栏、前进后退历史记录、以及web页面。

5.渲染阶段

（1）构建DOM树

输入：html文档
处理：html解析器解析
输出：浏览器可以识别的DOM树

（2）计算样式表

输入：输入：css文本（样式文件，html内嵌style,节点style属性）
处理：styleSheets(CSSOM)、属性值标准化、计算每个节点具体样式（继承、层叠）
输出： ComputedStyle CSSOM

（3）布局

输入：DOM CSSOM合并成渲染树
处理：构建一颗包含可见元素的布局树、布局计算
输出：完整的布局树

（4）分层

输入：布局树
处理：划分图层（拥护层叠上下文属性的元素被单独提升为一层、需要剪裁的地方会被创建为图层、如果一个节点没有对应的层，那么这个节点就从属父节点的图层）
输出：图层树

（5）图层绘制

输入：图层树
处理：将图层的绘制拆分为很多小的绘制指令
输出：绘制列表

（6）栅格化

输入：绘制列表
处理：主线程将绘制列表提交给合成线程，合成线程会将图层划分为图块合成线程会按照视口附近的图块优先生成位图，实际生成位图由栅格化来执行（栅格化线程池）栅格化过程都会使用GPU进行加上，生成位图过程叫快速栅格化，生成的位图保存在GPU内存
输出：图块的位图，保存在GPU中

（7）合成和显示

输入：合成线程会生成绘制图块的命令发送给给浏览器进程
处理：浏览器进程收到命令后，根据命令将页面内容绘制到内存中，最后将内存显示在屏幕上
输出：页面显示

其中前五个步骤在渲染进程主线程执行，生成绘制列表后会将绘制列表提交到合成线程

另外需要了解以下几个概念：

重排

触发：几何属性改变
性能：重排需要更新完整流水线，所以开销最大

重绘

触发：几何位置不变，改变样式，如：背景图
性能：重绘省去布局和分层阶段，所以执行效率会比重排操作高一些

直接合成

触发：渲染引擎跳过布局和绘制，只执行后续操作，叫做合成
性能：因为在非主线程上合成，并没有占用主线程资源，
另外也避免了布局、分层、绘制三个个子阶段，所以相对于重绘和重排，合成能大大提升绘制效率