超 深度解析浏览器中输入 URL 后发生了什么
先上张简单分析的图:
思维导图
1. DNS 域名解析
第一步,浏览器会检查缓存中有没有这个域名对应的解析过的 IP 地址,如果有,解析结束。
浏览器中的缓存有时间空间限制。查找操作系统的缓存中是否有这个域名对应的 DNS 解析结果。
在 Windows 系统中通过 C:\Windows\System32\drivers\etc\hosts 文件可以将域名解析到任何能够访问的 IP 地址,浏览器会首先使用这个地址。Linux 中这个配置文件是 /etc/named.conf。
缓存时间同样受域名失效时间与缓存空间大小限制。如果以上还没解析结束,操作系统会把域名发送到 LDNS ( Local DNS Server ),即本地区的域名服务器。
到这里已经可以解决 80% 的请求了。如果 LDNS 还没有,直接到 Root Server 域名服务器请求解析。
根域名服务器返回给本地域名服务器一个所查询的主域名服务器( gTDL Server )地址。gTDL 是国际*域名服务器,如 .com、.cn 等。
本地域名服务器再向主域名服务器发送请求。
接受请求的主域名服务器查找并返回此域名对应的 Name Server 域名服务器地址,它是注册的域名服务器,如域名提供商的服务器。
Name Server 域名服务器查询存储的域名与 IP 的映射关系表,得到 IP 与 TTL值(TTL 值是控制返回时间的)。
2.建立TCP连接
TCP三次握手
第一次握手:建立连接。客户端发送 SYN 包到服务器,Sequence Number 为 x,进入 SYN_SENT 状态,等待服务器确认。
第二次握手:服务器收到 SYN 包,对这个报文进行确认,设置 Acknowledgment Number 为 Sequence Number + 1;同时自己也要发送 SYN 包,Sequence Number 为 y;服务器将这些所有信息放入 SYN + ACK 包中发送给客户发,服务器进入 SYN_RCVD 状态。
第三次握手:客户端收到 SYN + ACK 包。将 Acknowledgment Number 设为 y + 1,即服务器发来的 Sequence Number + 1,并向服务器发送 ACK 包,发送完成后客户端和服务器都进入 ESTABLISHED 状态。
TCP三次握手与四次挥手
3. 发起 HTTP 请求
请求方法
下面只列举了 HTTP/1.1 支持的方法。
方法
说明 | 备注 | |
GET |
获取资源 |
|
POST |
传输实体主体 |
|
DELETE |
删除文件 |
不带验证机制,任何人都可以删除 |
PUT |
传输文件 |
不带验证机制,任何人都可以上传,存在安全问题 |
TRACE |
追踪路径 |
容易引发 XSL 跨站攻击 |
HEAD |
获得报文首部 |
|
OPTIONS |
询问支持方法 |
查询针对请求 URI 指定的资源支持的方法,响应如 |
CONNECT |
要求用隧道协议连接代理 |
主要使用 SLL 和 TLS 协议把通信内容加密后经网络隧道传输 |
请求报文
请求报文
4. 接收响应结果
状态码
状态码的类别
类别 | 原因 | |
1XX |
Informational |
请求的信息正在处理 |
2XX |
Success |
请求正常处理完毕 |
3XX |
Redirection |
需要进行附加操作以完成请求 |
4XX |
Client Error |
服务器无法处理请求 |
5XX |
Server Error |
服务器处理请求出错 |
具体状态
2XX
200 OK
表示从客户端发来的请求在服务器端被正常处理了204 No Content
服务器接收的请求已成功处理,但在返回的响应报文中不含实体的主体部分206 Partial Content
客户端进行了范围请求,而服务器成功执行了这部分的请求。响应报文中包含Content-Range
指定范围请求的实体内容。
3XX
301 Move Permanently
永久重定向。表示该资源已经分配了新的 URI,以后应使用资源现在的 URI。302 Found
临时重定向。表示该资源已经分配了新的 URI,希望用户本次能使用新的 URI 访问。
与 301 不同的是,302 已经移动的资源对应的 URI 将来还有可能改变。303 See Other
由于请求对应的资源存在另一个 URI,应使用 GET 定向获取请求的资源。304 Not Modified
它与重定向没有关系。
服务器资源未改变,可直接使用客户端未过期的缓存。304返回时,不包含任何主体部分。
4XX
400 Bad Request
请求报文中存在语法错误。401 Unauthorized
需要有通过 HTTP 认证的认证信息403 Forbidden
对请求资源的访问被服务器拒绝了404 Not Found
无法找到请求的资源
5XX
500 Internal Server Error
服务器端在执行请求时发生了错误503 Service Unavailable
服务器暂时处于超负载状态或正在维护
响应报文
响应报文
5. 浏览器解析 HTML
渲染引擎开始解析 HTML / SVG / XHTML,并将标签转化为内容树中的 DOM 节点,产生 DOM Tree。接着,它解析 CSS 文件以及标签中的 style 样式信息,形成 CSSOM 树。DOM 树与 CSSOM 树共同构成 Render Tree,即渲染树。
6. 浏览器布局渲染
渲染的流程:
计算 CSS 样式
构建 Render Tree
Layout 布局
绘制
Reflow / Layout:发生在元素尺寸改变时,或者将 display
由 block
变为 none
时。
Repaint:屏幕的一部分要重绘时,如某个元素背景色的变化。
注:Reflow 的成本比 Repaint 的成本大很多。
值得注意的是,这个 5、6 是逐步完成的,为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。