超 深度解析浏览器中输入 URL 后发生了什么

先上张简单分析的图:

超 深度解析浏览器中输入 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三次握手

  1. 第一次握手:建立连接。客户端发送 SYN 包到服务器,Sequence Number 为 x,进入 SYN_SENT 状态,等待服务器确认。

  2. 第二次握手:服务器收到 SYN 包,对这个报文进行确认,设置 Acknowledgment Number 为 Sequence Number + 1;同时自己也要发送 SYN 包,Sequence Number 为 y;服务器将这些所有信息放入 SYN + ACK 包中发送给客户发,服务器进入 SYN_RCVD 状态。

  3. 第三次握手:客户端收到 SYN + ACK 包。将 Acknowledgment Number 设为 y + 1,即服务器发来的 Sequence Number + 1,并向服务器发送 ACK 包,发送完成后客户端和服务器都进入 ESTABLISHED 状态。

超 深度解析浏览器中输入 URL 后发生了什么

TCP三次握手与四次挥手

3. 发起 HTTP 请求

请求方法

下面只列举了 HTTP/1.1 支持的方法。

方法

说明 备注

GET

获取资源


POST

传输实体主体


DELETE

删除文件

不带验证机制,任何人都可以删除

PUT

传输文件

不带验证机制,任何人都可以上传,存在安全问题

TRACE

追踪路径

容易引发 XSL 跨站攻击

HEAD

获得报文首部


OPTIONS

询问支持方法

查询针对请求 URI 指定的资源支持的方法,响应如 Allow: GET,POST,HEAD

CONNECT

要求用隧道协议连接代理

主要使用 SLL 和 TLS 协议把通信内容加密后经网络隧道传输

请求报文

超 深度解析浏览器中输入 URL 后发生了什么

请求报文

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
      服务器暂时处于超负载状态或正在维护

响应报文

超 深度解析浏览器中输入 URL 后发生了什么

响应报文

5. 浏览器解析 HTML

渲染引擎开始解析 HTML / SVG / XHTML,并将标签转化为内容树中的 DOM 节点,产生 DOM Tree。接着,它解析 CSS 文件以及标签中的 style 样式信息,形成 CSSOM 树。DOM 树与 CSSOM 树共同构成 Render Tree,即渲染树。

6. 浏览器布局渲染

渲染的流程:

  • 计算 CSS 样式

  • 构建 Render Tree

  • Layout 布局

  • 绘制

Reflow / Layout:发生在元素尺寸改变时,或者将 displayblock 变为 none 时。

Repaint:屏幕的一部分要重绘时,如某个元素背景色的变化。

注:Reflow 的成本比 Repaint 的成本大很多。

值得注意的是,这个 5、6 是逐步完成的,为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。