W3C SVG

浏览器从输入一个地址到渲染结束的过程

Mar 1, 2022

浏览器从输入一个地址到渲染结束的过程

  1. URL 输入
  2. DNS 解析
  3. 建立 TCP 连接（三次握手）
  4. TLS 协商
  5. 服务器响应
  6. 浏览器解析并绘制
  7. TCP 断开连接（四次挥手）

URL 输入

这点不过多阐述，即用户输入一个合法地址，浏览器识别是否符合规范

DNS 解析

浏览器是不能直接对域名进行 IP 地址解析的，需要使用 DNS 系统来获取域名 IP 地址

image-20220228203108439

具体步骤如上图，一共需要 7 步。

  1. 客户端向本地 DNS 服务器查询域名 IP 地址
  2. 本地 DNS 服务器向 DNS 根服务器查询 IP 地址
  3. DNS 根服务器返回域名后缀域服务器地址
  4. 本地 DNS 服务器获取到了域名后缀服务器域地址之后，向该服务器发起查询
  5. 域名后缀域服务器返回域名域地址
  6. 本地 DNS 服务器向域名域地址访问获取 IP 地址
  7. 域名域服务器返回 IP 地址给本地 DNS 服务器

经过以上 7 步，即可获取到目标域名服务器 IP 地址

其实也不需要硬记这些步骤，记住几个服务器的作用会更好

1. 本地DNS服务器：解析过程中使用到的最多的DNS服务器，查询IP地址的过程，都由他发出
2. DNS根服务器地址，返回 .com （域名后缀）域服务器地址
3. .com（域名后缀）域服务器，返回目标域名的域地址
4. 域名域服务器，返回IP地址
  1. 在浏览器中输入 hzfe.org 域名，操作系统检查浏览器缓存和本地的 hosts 文件中，是否有这个网址记录，有则从记录里面找到对应的 IP 地址，完成域名解析。
  2. 查找本地 DNS 解析器缓存中，是否有这个网址记录，有则从记录里面找到对应的 IP 地址，完成域名解析。
  3. 使用 TCP/IP 参数中设置的 DNS 服务器进行查询。如果要查询的域名包含在本地配置区域资源中，则返回解析结果，完成域名解析。
  4. 检查本地 DNS 服务器是否缓存该网址记录，有则返回解析结果，完成域名解析。
  5. 本地 DNS 服务器发送查询报文至根 DNS 服务器，根 DNS 服务器收到请求后，用顶级域 DNS 服务器地址进行响应。
  6. 本地 DNS 服务器发送查询报文至顶级域 DNS 服务器。顶级域 DNS 服务器收到请求后，用权威 DNS 服务器地址进行响应。
  7. 本地 DNS 服务器发送查询报文至权威 DNS 服务器，权威 DNS 服务器收到请求后，用 hzfe.org 的 IP 地址进行响应，完成域名解析。

建立 TCP 连接

当浏览器获取到了域名的 IP 地址之后，浏览器会有一个随机的端口（1024 > 随机 > 65535）想目标服务器的 80 端口（http 为 80 ，https 为 443）建立 TCP 连接，当这个链接到了服务端之后，通过 TCP 三次握手，建立 TCP 连接。

img

TLS 协商

建立连接之后就可以通过 HTTP 进行数据传输，如果使用 HTTPS，就会在 TCP 和 HTTP 之间多添加了一层协议做加密及认证的服务，HTTPS 使用 SSL 和 TLS 协议，保障了信息的安全。

服务器的响应

当浏览器到 web 服务器的连接建立后，浏览器就会发送一个 HTTP GET 请求，请求目标通常是一个 HTML 文件，服务器收到了请求后，会返回一个 HTTP 响应报文，内容包括响应头和 HTML 正文

TCP 断开连接

现在的页面为了优化请求的耗时，默认都会开启持久连接（keep-alive），那么一个 TCP 连接确切关闭的时候，就是一个 tab 页被关闭的时候，这个关闭的过程是四次挥手。

img