---
url: https://sugarat.top/interview/other/inputurl.md
---

# 在浏览器中输入URL到页面渲染的整个过程

## 构建请求行

```sh
GET   /     HTTP/1.1
方法  请求路径 请求的协议/版本
```

## 查找强缓存

检查资源是否存在强缓存,存在的话直接进行资源解析

## 读取DNS缓存

1. 浏览器先检查自身缓存中有没有被解析过的这个域名对应的ip地址，如果有，解析结束
2. 检查操作系统缓存中有没有对应的已解析过的结果(win中的hosts文件)
3. 都没有则进行下一步

## DNS解析

1. 请求本地域名服务器（LDNS）来解析这个域名,没有则进行下一步
2. DNS 根服务器查询

## 建立TCP连接

可以在此简述建立TCP链接的3次握手的过程

1. `客户端`向`服务端`发送请求报文
2. `服务端`收到请求报文,同意连接则向`客户端`发送一个应答
3. `客户端`收到`服务端`的应答,并告知`服务端`我准备好了

TCP 的一些特性

* 建立连接需要进行三次握手
* 断开连接都需要四次握手
* 在传输数据的过程中，通过各种算法保证数据的可靠性
* 相比 UDP 来说不那么的高效。

## 判断是否是Https请求

是:进行`TLS握手`

1. 客户端发送一个**随机值**以及支持的**协议**和**加密方式**
2. 服务端收到客户端的**随机值**，自己也产生一个**随机值**，确定使用的协议与加密方式，并且发送自己的**证书**（如果需要验证客户端证书需要说明）
3. 客户端收到服务端的**证书**并验证是否有效，**验证通过**会再生成一个**随机值**，通过服务端发送的证书中的**公钥**去加密这个随机值并发送给服务端
4. 服务端收到加密过的随机值并使用**私钥**解密获得第三个随机值，这时候两端都拥有了**三个随机值**，结合之前的两个明文随机数，计算生成本次会话所用的"会话密钥"，接下来的通信就可以通过该密钥来加密解密

**基本过程**

1. 客户端向服务器端索要并验证公钥
2. 双方协商生成”对话密钥”
3. 双方采用”对话密钥”进行加密通信

**详细握手过程**

1. 客户端发出请求:
   * 一个随机值(用于生成对话秘钥)
   * 支持的协议
   * 支持加密方式
   * 支持压缩的方法
2. 服务端收到客户端的请求，向客户端发出回应:
   * 一个随机值(用于生成对话秘钥)
   * 确定使用的协议
   * 确定使用的加密方式
   * 发送自己的证书（如果需要验证客户端证书需要说明）
3. 客户端收到服务端的证书并验证是否有效，如果证书没问题,向服务端发送一个请求:
   * 生成一个随机值(用证书公钥加密)
   * 编码改变通知(随后的信息将使用双方商定的加密方法和秘钥发送)
   * 客户端握手结束通知(前面发送的所有内容的hash值，用来提供给服务器校验)
4. 服务端最后响应
   * 服务器收到客户端的第三个随机数之后(用私钥解密)结合之前的两个明文随机数，计算生成本次会话所用的"会话密钥"
   * 编码改变通知(随后的信息都将用双方商定的加密方法和密钥发送)
   * 服务器握手结束通知(前面发送的所有内容的hash值，用来提供给客户端校验)

> 在 TLS 握手阶段，两端使用非对称加密的方式来通信，但是因为非对称加密损耗的性能比对称加密大，所以在正式传输数据时，两端使用对称加密的方式通信

**否:发起Http请求**

## 发送HTTP请求

向服务端正式发送http请求

## 返回HTTP报文

服务器处理请求响应结果,并返回Http报文

**判断状态码是什么?**

200:继续解析，如果 4xx 或 5xx 的话就会报错，如果 3xx 进行重定向

如果是**gzip**格式的话会先解压一下，然后通过文件的编码格式去解码文件

## 浏览器解析渲染页面

1. 针对下载完成后的HTML文件
   * 词法分析:标记化
   * 语法分析:构建DOM树
2. 解析HTML(超文本标记语言)-->DOM(文档对象模型)树
   * 遇到 script 标签的话，会判断是否存在 async 或者 defer属性
     * async:并行进行下载,下载完成后并执行js
     * defer:先并行下载文件，然后等待 HTML 解析完成后顺序执行。
     * 如果都没有:就会阻塞住渲染流程直到 JS 下载并执行完毕
   * 遇到link下载并解析CSS(层叠样式表)-->CSSOM(CSS对象模型)树
     * link标签引用
     * style标签中的样式
     * 元素的内嵌style属性
3. DOM树 + CSSOM树 --> Render Tree(渲染树):CSSOM 树和 DOM 树构建完成后开始生成渲染树
4. 回流(Layout):根据生成的渲染树,回流得到节点的几何信息(位置,尺寸)
   * 计算可见的Dom节点在设备视口的位置和尺寸,这个计算阶段就是回流
   * 为了知道每个可见节点在视口的确切大小和位置,浏览器从渲染树的根节点进行遍历
5. 重绘(Painting):根据渲染树与回流得到的节点几何信息,得到节点的绝对像素
   * 经过生成的渲染树和回流阶段,得到了所有可见节点具体的几何信息与样式,然后将渲染树的每个节点转换成屏幕上的实际像素,这个阶段就叫重绘节点
6. 将像素发送给GPU绘制,合成图层,然后展示在页面上

> 在下载文件时可以使用 HTTP/2 协议(多路复用)可以解决队头阻塞的问题

## 断开TCP连接

断开进行4次数握手

1. `客户端`对`服务端`发送释放连接的请求
2. `服务端`收到`客户端`的请求后,告知应用层释放连接
3. `服务端`将数据发送完毕后,再向`客户端`发送释放连接请求
4. `客户端`收到释放请求后,并向`服务端`发送确认释放的应答,同意释放