从URL输入到页面显示的完整过程

1. URL解析

当用户在浏览器地址栏输入URL并按下回车后，浏览器首先会对URL进行解析，判断其合法性，并提取其中的关键信息，如协议、域名、端口、路径等。

2. DNS解析

浏览器需要通过域名获取服务器的IP地址，这个过程称为DNS解析：

1. 浏览器缓存检查：首先检查浏览器自身的DNS缓存中是否有该域名对应的IP地址。
2. 操作系统缓存检查：如果浏览器缓存中没有，则检查操作系统的DNS缓存。
3. 路由器缓存检查：如果操作系统缓存中也没有，则检查路由器的DNS缓存。
4. ISP DNS服务器查询：如果本地缓存都没有，则会向ISP（互联网服务提供商）的DNS服务器发送查询请求。
5. 递归查询：如果ISP DNS服务器没有该域名的记录，它会向根域名服务器发起递归查询，依次经过顶级域名服务器、权威域名服务器，最终获取到域名对应的IP地址。

3. 建立TCP连接

获取到服务器的IP地址后，浏览器会与服务器建立TCP连接，这个过程称为"三次握手"：

1. 第一次握手：浏览器向服务器发送一个SYN包（同步序列编号），请求建立连接。
2. 第二次握手：服务器收到SYN包后，回复一个SYN+ACK包，表示确认收到请求并同意建立连接。
3. 第三次握手：浏览器收到服务器的SYN+ACK包后，再发送一个ACK包，确认连接建立。

4. 发送HTTP请求

TCP连接建立后，浏览器会向服务器发送HTTP请求。HTTP请求包括请求行、请求头和请求体（可选）。

1. 请求行：包含请求方法（GET、POST等）、请求的URL和HTTP协议版本。
2. 请求头：包含一些附加信息，如User-Agent、Accept、Cookie等。
3. 请求体：对于POST请求等，可能包含请求的数据。

5. 服务器处理请求

服务器接收到HTTP请求后，会进行处理：

1. 解析请求：服务器解析HTTP请求，获取请求的方法、URL、头部信息等。
2. 处理请求：根据请求的内容，服务器可能会查询数据库、执行业务逻辑等。
3. 生成响应：服务器处理完请求后，会生成HTTP响应，包括状态码、响应头和响应体。

6. 服务器返回HTTP响应

服务器将HTTP响应发送回浏览器：

1. 状态行：包含HTTP协议版本、状态码和状态描述。
2. 响应头：包含一些附加信息，如Content-Type、Content-Length、Set-Cookie等。
3. 响应体：包含请求的实际内容，如HTML、CSS、JavaScript、图片等。

7. 浏览器解析HTML

浏览器接收到HTTP响应后，开始解析HTML文档：

1. 构建DOM树：浏览器将HTML解析成DOM树（Document Object Model）。
2. 解析CSS：浏览器同时解析CSS，构建CSSOM树（CSS Object Model）。
3. 构建渲染树：将DOM树和CSSOM树结合，构建渲染树（Render Tree）。
4. 布局：计算渲染树中每个节点的位置和大小（Layout/Reflow）。
5. 绘制：将渲染树绘制到屏幕上（Paint）。

8. 浏览器加载其他资源

在解析HTML的过程中，浏览器会遇到其他资源的引用，如CSS、JavaScript、图片等，会继续发起请求获取这些资源：

1. CSS文件：浏览器会异步加载CSS文件，并解析构建CSSOM树。
2. JavaScript文件：浏览器会加载并执行JavaScript文件，可能会修改DOM树和CSSOM树。
3. 图片等资源：浏览器会异步加载图片等资源，并在加载完成后显示。

9. 执行JavaScript

浏览器在解析HTML时，遇到<script>标签会暂停HTML解析，转而加载和执行JavaScript：

1. 阻塞解析：传统的<script>标签会阻塞HTML解析，直到脚本加载和执行完成。
2. 异步加载：使用async或defer属性可以让JavaScript异步加载，不阻塞HTML解析。
3. DOM操作：JavaScript可以操作DOM，修改页面内容和结构。
4. 事件处理：JavaScript可以添加事件监听器，响应用户交互。

10. 页面渲染完成

当所有资源加载完成，DOM树构建完成，CSSOM树构建完成，JavaScript执行完成后，页面就完全渲染并显示给用户。

参考文档

1. MDN - Web性能基础：DNS查找
2. MDN - HTTP概述
3. MDN - 浏览器的工作原理：渲染引擎，HTML解析
4. Google Developers - 关键渲染路径
5. TCP/IP详解 卷一：协议