关于浏览器输入一个网址后页面经历的过程总结

浏览器进程

浏览器输入一个网址后的主流程

一、用户输入

根据以下规则，把用户输入的内容加上协议，合成为完整的 URL。

1. 判断输入的关键字是搜索内容，还是请求的 URL

2. 如果是搜索内容：使用浏览器默认的搜索引擎，来合成新的带搜索关键字的 URL。

3. 如果是地址：添加协议头等信息

二、网络请求

浏览器进程通过IPC进程协议与网络进程通信，让网络进程开始请求：

检查缓存，如果有缓存则直接返回

浏览器发送请求前，根据请求头的expires和cache-control判断是否命中（包括是否过期）强缓存策略，如果命中，直接从缓存获取资源，并不会发送请求。如果没有命中，则进入下一步。

DNS解析，获取真实IP地址

TCP三次握手

第一次握手

客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入 SYN-SENT 状态，x 表示客户端的数据通信初始序号。

第二次握手

服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态。

第三次握手

当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入ESTABLISHED 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连接建立成功。

HTTPS握手（HTTPS协议需要）

1. 客户端发送第一个随机值client-random，需要的协议和加密方式

2. 服务端收到客户端的随机值，自己也产生第二个随机值service-random，并根据客户端需要的协议和加密方式来使用对应的方式，发送自己的证书（如果需要验证客户端证书需要说明）

3. 客户端收到服务端的证书并验证是否有效，验证通过会通过证书的公钥加密client-random + service-random再生成第三个随机值pre-master并发送给服务端。

4. 服务端收到加密过的随机值pre-master，会使用私钥解密pre-master获得3个随机值后，按照之前规定的加密方式，生成密钥master secret 并发送确认消息给浏览器。

5. 这时候客户端也将拥有的三个随机值client-random、service-random、pre-maste，按照之前约定的加密方式生成密钥master secret，接下来的通信就可以通过该密钥来加密解密

构建与响应请求

发送请求

响应请求

三、渲染页面

准备渲染进程

新增渲染进程（默认策略）

从一个页面点击打开了另一个非同源新页面或者直接网站输入打开新标签页面；比如打开QQ页面，因为直接新增新标签页面，新增渲染进程

再从该页面点击新开标签新闻页，因为新增了不同源标签页（new.qq.com），所以新增渲染进程 

复用渲染进程

从一个页面内点击打开了另一个同源新页面；

比如从一个网站点击打开一个新标签页，该标签页同站，所以复用了进程。

比如从新闻页面国际栏目点击进入军事栏目，没有新增标签页，也是同站，所以复用进程。 

同源策略如下：

提交文档

浏览器需要进行提交文档的流程，所以输入地址后，之前页面是加载一会才更新为新页面，具体流程如下：

1. 建立传输管道：渲染进程接收到浏览器发出的 “提交文档” 消息后，会和网络进程建立传输数据的 “管道”；
2. 确认提交：等数据传输完成后，渲染进程会返回 “确认提交” 的消息给浏览器进程；
3. 更新浏览器界面状态：浏览器进程收到确认提交消息后，更新界面状态，包括安全状态、地址栏的URL、前进后台的历史状态以及进入渲染页面阶段

渲染阶段（浏览器核心中的核心）

构建DOM树（主线程）

分为四个阶段：

        1. 输入HTML文件；

        2. 字节流转换为Token：分为 Tag Token 和文本 Token。对应我们的起始标签、终止标签、和文本内容。

        3. HTML解析器解析

        4. 转换输出为document

样式计算，生成样式树styleSheets（主线程）

        1. 首先将 CSS 样式转换为 document里的 styleSheets，优先级——元素style >