返回
从 URL 起航，网页的渲染之旅
前端
2024-01-14 17:23:53
从在地址栏输入域名地址开始，到被展示在屏幕上，中间是怎样一个过程？本文将对该过程进行探讨，带领你了解网页渲染的整个流程。
DNS解析
当你在浏览器地址栏中输入一个域名时，浏览器首先需要进行DNS解析，将域名转换为对应的IP地址。DNS解析过程如下：
- 浏览器首先会检查本地是否有该域名的缓存记录，如果有则直接使用缓存的IP地址。
- 如果本地没有缓存，浏览器会向DNS服务器发送请求，查询该域名的IP地址。
- DNS服务器收到请求后，会查询自己的记录，如果记录中存在该域名的IP地址，则直接返回。
- 如果DNS服务器中没有该域名的IP地址，则会向上一级DNS服务器查询，以此类推，直到找到该域名的IP地址。
TCP三次握手
在获得域名对应的IP地址后，浏览器需要与服务器建立TCP连接。TCP连接的建立过程如下：
- 浏览器向服务器发送一个SYN（Synchronize）包，其中包含了一个随机生成的序列号。
- 服务器收到SYN包后，发送一个SYN-ACK（Synchronize-Acknowledge）包，其中包含了自己的随机生成的序列号和对浏览器序列号的确认号。
- 浏览器收到SYN-ACK包后，发送一个ACK（Acknowledge）包，其中包含了对服务器序列号的确认号。
TCP三次握手完成后，浏览器和服务器之间就建立起了TCP连接。
HTTP请求
TCP连接建立后，浏览器就可以向服务器发送HTTP请求。HTTP请求由以下几个部分组成：
- 请求行：请求行包含了请求方法（如GET、POST、PUT等）、请求的资源路径（如/index.html）和HTTP协议版本（如HTTP/1.1）。
- 请求头：请求头包含了请求的一些附加信息，如请求的语言（如Accept-Language: zh-CN）、请求的编码（如Accept-Encoding: gzip, deflate）等。
- 请求体：请求体包含了请求的数据，如表单数据（如username=john&password=doe）或JSON数据（如{"username": "john", "password": "doe"}）。
解析HTML
服务器收到HTTP请求后，会返回一个HTTP响应。HTTP响应由以下几个部分组成：
- 状态行：状态行包含了响应的状态码（如200 OK、404 Not Found等）和状态信息（如OK、Not Found等）。
- 响应头：响应头包含了响应的一些附加信息，如响应的语言（如Content-Language: zh-CN）、响应的编码（如Content-Encoding: gzip, deflate）等。
- 响应体：响应体包含了响应的数据，如HTML代码、CSS样式表、JavaScript脚本等。
浏览器收到HTTP响应后，会对响应体中的HTML代码进行解析。HTML解析过程如下：
- 浏览器首先会将HTML代码中的标签转换为DOM树。
- 浏览器会根据DOM树构建渲染树。
- 浏览器会根据渲染树计算每个元素的布局。
- 浏览器会根据布局信息将元素绘制到屏幕上。
渲染页面
在解析完HTML代码后，浏览器就开始渲染页面。渲染过程如下：
- 浏览器会根据渲染树计算每个元素的布局。
- 浏览器会根据布局信息将元素绘制到屏幕上。
- 浏览器会根据元素的样式信息对元素进行修饰。
- 浏览器会根据元素的交互信息对元素添加交互效果。
浏览器缓存
浏览器为了提高网页的加载速度，会将一些资源缓存到本地。浏览器缓存机制如下：
- 浏览器会将请求过的资源缓存到本地。
- 当浏览器再次请求同一个资源时，会首先检查本地是否有缓存。
- 如果本地有缓存，浏览器会直接使用缓存的资源。
- 如果本地没有缓存，浏览器会向服务器发送请求，获取最新的资源。
浏览器缓存机制可以有效地提高网页的加载速度，特别是对于那些经常访问的网站。
