计网 地址栏输入 URL 敲下回车后发生了什么

·  阅读 63

一共六步:

  1. URL解析
  2. DNS 查询
  3. TCP 连接
  4. HTTP 请求
  5. 响应请求
  6. 页面渲染

一、URL解析

  1. 地址解析,首先判断你输入的是一个合法的 URL 还是一个待搜索的关键词,并且根据你输入的内容进行自动完成、字符编码等操作

image.png

  1. 由于安全隐患,会使用 HSTS 强制客户端使用 HTTPS 访问页面

  2. 浏览器还会进行一些额外的操作,比如安全检查、访问限制(之前国产浏览器限制 996.icu)

  3. 检查缓存

image.png

二、 DNS 查询

image.png

  1. 浏览器缓存

浏览器会先检查是否在缓存中,没有则调用系统库函数进行查询。

  1. 操作系统缓存

操作系统也有自己的DNS缓存,但在这之前,会向检查域名是否存在本地的 Hosts 文件里,没有则向 DNS 服务器发送查询请求

  1. 路由器缓存

路由器也有自己的缓存

  1. ISP DNS 缓存

ISP DNS 就是在客户端电脑上设置的首选 DNS 服务器,它们在大多数情况下都会有缓存

  1. 根域名服务器查询

在前面所有步骤没有缓存的情况下,本地 DNS 服务器会将请求转发到互联网上的根域服务器

image.png

三、 TCP 连接

在确定目标服务器服务器的 IP 地址后,则经历三次握手建立 TCP 连接

image.png

四、 HTTP 请求

当建立 tcp 连接之后,就可以在这基础上进行通信,浏览器发送 http 请求到目标服务器

请求内容包括请求行、请求头、请求主体

image.png

五、 响应请求

当服务器接收到浏览器的请求之后,就会对进行处理,处理完成之后返回一个 HTTP 响应消息,包括:状态行、 响应头、响应正文

image.png

在服务器响应之后,由于现在 http 默认开始长连接keep-alive,当页面关闭之后,tcp 链接则会经过四次挥手完成断开

六、页面渲染

当浏览器接收到服务器响应的资源后,首先会对资源进行解析:

  • 查看响应头的信息,根据不同的指示做对应处理,比如重定向,存储cookie,解压gzip,缓存资源等等
  • 查看响应头的 Content-Type 的值,根据不同的资源类型采用不同的解析方式

关于页面的渲染过程如下:

  • 解析 HTML,构建 DOM 树
  • 解析 CSS ,生成 CSS 规则树
  • 合并 DOM 树和 CSS 规则,生成 render 树
  • 布局 render 树( Layout / reflow ),负责各元素尺寸、位置的计算
  • 绘制 render 树( paint ),绘制页面像素信息
  • 浏览器会将各层的信息发送给 GPU,GPU 会将各层合成( composite ),显示在屏幕上

image.png

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改