浏览器从输入URL到渲染完页面的整个过程

一、解析URL

当用户在浏览器的地址栏中输入URL时，浏览器会首先对URL进行解析，提取并分析出协议（如http或https）、域名、路径等信息。

如果输入的 URL 中的协议或者主机名不合法，将会把地址栏中输入的内容传递给搜索引擎。如果没有问题，浏览器会检查 URL 中是否出现了非法字符，如果存在非法字符，则对非法字符进行转义后再进行下一过程。

---

二、DNS解析

DNS 解析过程

通过DNS将URL解析成IP地址

DNS解析过程：

1. 向浏览器缓存中查找，如果没有则进行下一步;
2. 向系统缓存（本地的hosts文件）中查找，如果没有则进行下一步；
3. 向路由器缓存中查找，如果没有则进行下一步；
4. 向本地域名服务器中递归查找，如果没有则进行下一步；
5. 向根域名服务器中查找，返回顶级域名服务器的地址；
6. 向顶级域名服务器中查找，返回权限域名服务器的地址；
7. 向权限域名服务器中查找，返回目标IP地址；
8. 本地域名服务器缓存IP并返回给操作系统；
9. 操作系统缓存IP并返回给浏览器；
10. 浏览器缓存IP并访问IP；

---

三、建立TCP连接

知道了服务器的IP地址后，浏览器利用tcp协议通过三次握手与服务器建立连接，确保浏览器和服务器之间建立起一个可靠的连接通道。

TCP的三次握手四次挥手传送门

建立连接需要三个过程（三次握手）：

1. 客户端向服务器发送一个建立连接的请求（客户端向服务器拨打电话）
2. 服务器接到请求后发送同意连接的信号（服务器接听电话）
3. 主机接到同意连接的信号后，再次向服务器发送了确认信号（客户端：“喂喂喂，听得到吗？”）

---

四、发送HTTP请求

一旦TCP连接建立成功，浏览器会向服务器发送一个HTTP请求，请求页面资源。这个请求通常包含请求的头部（header）和主体（body）。

1. 浏览器根据解析到的IP地址和端口号发起HTTP请求，HTTP请求包括header和body。header中包括请求的方式（get和post）、请求的协议 （http、https、ftp）、请求的地址ip、缓存cookie。body中有请求的内容。例如：GET https://www.google.com/ HTTP/1.1
2. 服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件
3. 服务器将得到的 HTML 文件发送给浏览器
   .

get会产生一个tcp数据包，post则是两个（GET和POST最详细的总结传送门）

• get请求时，浏览器会把headers和data一起发送出去，服务器响应200（返回数据），
• post请求时，浏览器先发送headers，服务器响应100 continue， 浏览器再发送data，服务器响应200（返回数据）。

---

五、 服务器处理请求并返回响应

服务器接收到浏览器的HTTP请求后，会处理并生成相应的HTML文档作为响应返回给浏览器。
这个过程可能包括查询数据库、执行服务器端脚本等。

客户端请求静态资源和动态资源：

1. 静态资源：如果客户端请求的是静态资源，则web服务器根据URL地址到服务器的对应路径下查找文件，然后给客户端返回一个HTTP响应，包括状态行、响应头和响应正文。
2. 动态资源：如果客户端请求的是动态资源，则web服务器会调用CGI/VM执行程序完成相应的操作，如查询数据库，然后返回查询结果数据集，并将运行的结果–HTML文件返回给web服务器。Web服务器再将HTML文件返回给用户。

---

六、浏览器接收并解析渲染HTML

浏览器拿到HTML文档后，根据渲染规则进行渲染：

1. DOM 树：解析 HTML 构建 DOM(DOM 树)
2. CSS 树：解析 CSS 构建 CSSOM(CSS 树)
3. 渲染树：CSSOM 和 DOM 一起生成 Render Tree(渲染树)
4. 布局（layout）：根据Render Tree浏览器就知道网页中有哪些节点，以及各个节点与 CSS 的关系，从而知道每个节点的位置和几何属性（重排）
5. 绘制（Paint）：根据计算好的信息绘制整个页面（重绘）

当所有资源都加载完毕，页面渲染完成后，浏览器会触发“load”事件，表示页面已经完全加载并可以供用户交互。

浏览器渲染过程传送门

---

七、断开连接

客户端没有数据发送时就需要(四次挥手)断开连接，以释放服务器资源。

TCP的三次握手四次挥手传送门

1. 客户端：我没有数据要发送了，打算断开连接
2. 服务器：你的请求我收到了，我这还有数据没有发送完成，你等下
3. 服务器：我的数据发送完毕，可以断开连接了
4. 客户端：ok，你断开连接吧（客户端独白：我将在2倍的最大报文段生存时间后关闭连接。如果我再次收到服务器的消息，我就知道服务器没有收到我的这句话，我就再发送一遍）。

最终服务器收到该客户端发送的消息断开连接，客户端也关闭连接。