从输入URL到页面显示都发生了什么

[Twlig]

阶段一：用户输入阶段

用户在地址栏输入内容之后，浏览器会首先判断用户输入的是合法的URL还是搜索内容，如果是搜索内容就合成URL，如果是合法的URL就开始进行加载。

阶段二：发起URL请求阶段

发起URL请求阶段主要包括以下步骤：

1. 构建请求行：浏览器进程首先会构建请求行信息，然后通过进程间通信IPC将URL请求发送给网络进程。
2. 查找缓存：网络进程获取到URL之后，会先去本地缓存中查找是否有缓存资源，如果有则直接将缓存资源返回给浏览器进程，否则进入网络请求阶段。
3. DNS解析：网络进程请求首先会向本地DNS发起域名解析请求，本地DNS检查缓存中是否有www.a.com的IP地址记录。如果有，则直接返回给终端用户；如果没有，则向授权DNS查询。
4. 当授权DNS解析www.a.com时，返回域名CNAME www.a.tbcdn.com对应IP地址。域名解析请求发送至DNS调度系统，并为请求分配最佳节点IP地址。本地DNS获取DNS返回的解析IP地址。用户获取解析IP地址。用户向获取的IP地址发起对该资源的访问请求。（使用CDN的情况）
5. 等待TCP队列：chrome有个机制，同一个域名同时最多只能建立6个TCP连接，如果超过这个数量的连接必须要进入排队等待状态。
6. 建立TCP连接：通过TCP三次握手与服务器建立连接，然后进行数据传输。
7. 发起HTTP请求：浏览器首先会向服务器发送请求行，请求行中包含了请求方法、请求URI和HTTP版本，还会发送请求头，告诉服务器一些浏览器的相关信息，比如浏览器内核、请求域名、Cookie等信息。
8. 服务器处理请求：服务器首先返回相应行，包括协议版本和状态码，然后会返回响应头包含返回的数据类型，服务器要在客户端保存的Cookie等。
9. 断开TCP连接：数据传输完成后，通过四次挥手来断开连接。

阶段三：准备渲染进程阶段

1. 网络进程将获取的数据进行解析，根据响应头中的Content-type来判断响应数据的类型，如果是字节流类型，就将该请求交给下载管理器去下载，如果是text/html类型，就通知浏览器进程获取到的是HTML，准备渲染进程。
2. 一般情况下浏览器的一个tab页面对应一个渲染进程，如果从当前页面打开的新页面并且属于同一站点，这种情况会复用渲染进程，其他情况则需要创建新的渲染进程。

阶段四：提交文档阶段

1. 渲染进程准备好之后，浏览器会发出提交文档的消息给渲染进程，渲染进程收到消息后，会和网络进程建立数据传输的管道，文档数据传输完成后，渲染进程会返回确认提交的消息给浏览器进程。
2. 浏览器收到确认提交的消息后，会更新浏览器的页面状态，包括了安全状态，地址栏的URL，前进后退的历史状态，并更新web页面为空白。

阶段五：页面渲染阶段

1. 文档提交之后，渲染进程将开始页面解析并加载子资源。
2. 构建DOM树：HTML经过解析后输出的是一个以document为顶层节点的树状结构的DOM。
3. 样式计算：将从link标签引入的外部样式，style标签里的样式和元素身上的样式转换成浏览器能够理解的样式表，然后将样式表中的属性值进行标准化，例如color:red转换为color的rgb形式，然后根据CSS的继承和层叠规则计算出DOM树种每个节点的具体样式。
4. 布局阶段：会生成一棵只包含可见元素的布局树，然后根据布局树的每个节点计算出其具体位置和大小。
5. 分层：对页面种的复杂效果例如3D转换，页面滚动或者z轴排序等生成图层树。
6. 绘制：为每个图层生成绘制列表，并将其提交到合成线程中。
7. 光栅化：优先选择可视窗口内的图块来生成位图数据。
8. 合成：所有图块都被光栅话之后开始显示页面。

问题汇总

RQ1：浏览器解析HTML过程

针对这个问题，我们可以从阶段五：页面渲染阶段来回答。

RQ2：强缓存和协商缓存发生在那个阶段？

强缓存和协商缓存发生在发起URL请求阶段，在这个阶段构建请求行之后会查找缓存。

RQ3：DNS解析中端口需要DNS解析吗？

不需要，因为HTTP默认的是80端口，HTTPS默认的是443端口，如果要指定端口可以直接在URL里面添加。

RQ4：哪些阶段可以优化？

1. 优化DNS查询：DNS预解析
2. 优化TCP连接：可以通过请求头keep-alive来优化。
3. 优化HTTP响应报文：通过CDN和Gzip压缩。

原文链接：

• 从输入URL到页面显示都发生了什么