从浏览器输入URL到页面渲染的完整流程详解
从浏览器输入URL到页面渲染的完整流程详解
YuXiang当我们每天在浏览器中输入一个URL并按下回车时，背后其实发生了一系列复杂的过程。这篇文章将详细解析从输入URL到页面渲染的完整流程，帮助你更好地理解浏览器的工作原理。
1. 输入URL并解析
一切从用户在浏览器地址栏输入URL开始。例如，输入 https://www.wyxup.top。
URL解析
浏览器会解析URL，提取以下信息：
协议 ：如
https或http。域名 ：如
www.wyxup.top。端口 ：如
443（HTTPS默认端口）或80（HTTP默认端口）。路径 ：如
/index.html。查询参数 ：如
?id=123。片段标识 ：如
#section1。
2. DNS解析
浏览器需要通过域名找到服务器的IP地址，这个过程称为DNS解析。
DNS解析步骤
浏览器缓存 ：浏览器首先检查自身缓存中是否有该域名的IP地址。
系统缓存 ：如果浏览器缓存中没有，浏览器会检查操作系统的缓存（如Windows的
hosts文件）。路由器缓存 ：如果系统缓存也没有，请求会发送到路由器缓存。
ISP DNS服务器 ：如果以上缓存都没有，浏览器会向ISP（互联网服务提供商）的DNS服务器发起请求。
递归查询 ：如果ISP的DNS服务器没有缓存，它会从根域名服务器开始递归查询，直到找到对应的IP地址。
最终，浏览器获取到目标服务器的IP地址（如 93.184.216.34）。
3. 建立TCP连接
浏览器通过IP地址与服务器建立连接。这个过程通常使用TCP协议，分为以下步骤：
三次握手
SYN ：浏览器向服务器发送一个SYN（同步）包，请求建立连接。
SYN-ACK ：服务器收到请求后，回复一个SYN-ACK（同步-确认）包。
ACK ：浏览器收到SYN-ACK后，发送一个ACK（确认）包，连接建立。
如果是HTTPS协议，还会进行TLS/SSL握手，确保通信安全。
4. 发送HTTP请求
连接建立后，浏览器会向服务器发送HTTP请求。请求包括以下内容：
请求行 ：包含请求方法（如
GET或POST）、路径（如/index.html）和协议版本（如HTTP/1.1）。请求头 ：包含浏览器信息、缓存策略、Cookie等（如
User-Agent、Accept-Language）。请求体 ：如果是POST请求，会包含提交的数据。
5. 服务器处理请求
服务器收到请求后，会根据请求内容进行处理：
解析请求 ：服务器解析请求行、请求头和请求体。
处理请求 ：根据路径和参数，服务器可能执行以下操作：
静态资源：直接返回文件（如HTML、CSS、JS）。
动态资源：调用后端程序（如PHP、Node.js）生成内容。
生成响应 ：服务器生成HTTP响应，包括状态码（如
200 OK）、响应头（如Content-Type）和响应体（如HTML内容）。
6. 浏览器接收响应
浏览器收到服务器的HTTP响应后，开始解析和渲染页面。
解析HTML
构建DOM树 ：浏览器将HTML解析为DOM（文档对象模型）树。
解析CSS ：浏览器解析CSS文件，生成CSSOM（CSS对象模型）树。
构建渲染树 ：将DOM树和CSSOM树结合，生成渲染树（Render Tree）。
7. 页面渲染
浏览器根据渲染树进行页面布局和绘制：
布局（Layout） ：计算每个元素在页面中的位置和大小。
绘制（Paint） ：将每个元素绘制到屏幕上。
合成（Composite） ：将多个图层合成为最终页面。
8. 加载其他资源
在渲染过程中，浏览器可能会发现需要加载其他资源（如图片、JS文件）：
异步加载 ：浏览器会异步请求这些资源。
更新渲染 ：加载完成后，浏览器会更新DOM和渲染树，并重新绘制页面。
9. 执行JavaScript
如果页面中包含JavaScript代码，浏览器会执行这些代码：
解析JS ：浏览器解析并执行JS代码。
操作DOM ：JS可能会修改DOM或CSSOM，触发重新渲染。
10. 页面加载完成
当所有资源加载完毕且页面渲染完成后，浏览器会触发 DOMContentLoaded 和 load 事件，标志页面加载完成。
总结
从输入URL到页面渲染的流程可以概括为以下步骤：
输入URL并解析。
DNS解析，获取服务器IP地址。
建立TCP连接（三次握手）。
发送HTTP请求。
服务器处理请求并返回响应。
浏览器解析HTML、CSS，构建DOM和CSSOM。
生成渲染树，进行布局和绘制。
加载其他资源并更新渲染。
执行JavaScript。
页面加载完成。
这个过程涉及网络通信、服务器处理、浏览器解析和渲染等多个环节，每一步都至关重要。
