preload、prefetch、preconnect 和 dns-prefetch

xRainco
132 阅读5分钟

1. preload

预加载，主要用于提升当前页面某些阻塞资源的下载优先级，使得页面能够尽快渲染显示出来。

  • 案例一：预加载定义在 CSS 中资源的下载，比如自定义字体
  • 案例二：预加载 CSS 文件
    • 在首屏加载优化中一直存在一种技术，叫做抽取关键CSS，意思就是把页面中在视口中出现的样式抽出一个独立的 CSS 文件出来 critical.css，然后剩余的样式在放到另外一个文件上 non-critical.css.由于 CSS 会阻塞页面的渲染，当同时去加载这 2 部分样式的时候，只要 non-critical.css 还没加载完成，那么页面就显示不了，而实际上只需要显示出视口下的界面即可，所以期待的结果是：当加载完成 critical.css 的时候马上显示出视口下的界面，不让 non-critical.css 阻塞渲染，则需要给 non-critical.css 加上预加载。
  • 案例三：结合媒体查询预加载响应式图片

。。。。

2. prefetch

  • 用于加载未来（比如下一个页面）会用到的资源，并且告诉浏览器在空闲的时候去下载，它会将下载资源的优先级降到最低。

3. preconnect

  • 查询域名并将其解析成 IP 地址
  • 建立和服务器的连接
  • 加密连接以确保安全

4. dns-prefetch

  • 提前解析域名

。。。。

碎碎念~明明记得那么牢的竟然说得不好，呜呜呜

顺便附一道面试题吧，害

问：输入URL到显示页面的全过程

步骤过程
1. 输入 URL用户在浏览器地址栏输入 URL
2. DNS 解析获取域名对应的 IP 地址
3. TCP 连接三次握手建立 TCP 连接（HTTPS 需要 TLS 握手）
4. 发送 HTTP 请求浏览器向服务器请求 HTML 页面
5. 服务器处理请求服务器查询数据库 / 读取缓存，并返回 HTML
6. 浏览器解析 HTML解析 DOM、CSSOM、执行 JS，构建渲染树
7. 加载外部资源加载 CSS、JS、图片等
8. 渲染页面计算布局，绘制到屏幕
9. 用户交互监听点击、滚动等事件，并更新 UI

关键优化点

  1. 使用 CDN 加速（减少 DNS 解析时间）。
  2. 开启 HTTP/2（支持多路复用，减少 TCP 连接）。
  3. 开启 Gzip 压缩（减少 HTML/CSS/JS 体积）。
  4. 利用缓存（Cache-Control、ETag）。
  5. 减少 DOM 操作（避免回流、重绘）。
  6. 懒加载 & 代码拆分（按需加载资源）

末尾看详细版

1. 用户输入 URL

用户在浏览器地址栏输入一个 URL，例如：

https://www.example.com
  • 如果 URL 没有协议（如 http:// 或 https://），浏览器会默认补充 http:// 或 https://。
  • 如果只输入关键字（如 example ），浏览器会使用默认搜索引擎查询。
  • 如果之前访问过，浏览器可能直接从缓存加载（强缓存 / 协商缓存）。
2. 浏览器进行 DNS 解析

目标：找到 www.example.com 对应的 IP 地址

浏览器首先检查是否已有缓存：

  • 浏览器缓存（DNS 解析缓存）
  • 操作系统缓存（/etc/hosts 或 C:\Windows\System32\drivers\etc\hosts）
  • 路由器缓存（路由器可能有 DNS 解析缓存）
  • ISP DNS 服务器（向本地 ISP 运营商的 DNS 服务器查询）
  • 根 DNS 服务器 → 顶级域名服务器（TLD） → 权威 DNS 服务器，最终获取 IP 地址。

最终，www.example.com 被解析为 IP 地址，例如：

93.184.216.34
3. 建立 TCP 连接（三次握手）

目标：客户端与服务器建立可靠的 TCP 连接

浏览器通过 TCP 三次握手 与服务器建立连接：

  • 客户端发送 SYN（请求建立连接）
  • 服务器返回 SYN-ACK（确认连接请求）
  • 客户端返回 ACK（连接建立）

如果是 HTTPS，还需要进行 TLS/SSL 握手：

  • 服务器提供 SSL 证书，客户端验证证书有效性（防止中间人攻击）。
  • 双方协商加密算法，交换密钥，确保数据安全。
4. 发送 HTTP 请求

目标：浏览器请求服务器上的页面资源

浏览器向服务器发送 HTTP 请求，例如：

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html
Connection: keep-alive
1.2.3.4.5.

关键部分：

  • GET：请求方法（也可能是 POST、PUT、DELETE）。
  • Host: www.example.com：服务器主机名（虚拟主机）。
  • User-Agent：浏览器信息。
  • Accept：告诉服务器客户端希望接收的资源类型。
  • Connection: keep-alive：保持 TCP 连接，避免重复建立连接。
5. 服务器处理请求

目标：服务器解析请求，并返回对应的 HTML 页面

服务器收到请求后，执行以下操作：

  • 查找缓存（CDN / 服务器缓存 / 代理缓存）。
  • 请求静态资源（如果请求的是 HTML、CSS、JS、图片）。
  • 执行动态代码（如 PHP、Node.js、Python 生成 HTML）。
  • 访问数据库（如 MySQL、MongoDB）查询数据并返回页面。
  • 生成 HTTP 响应，例如：
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1024
Cache-Control: max-age=3600
1.2.3.4.

并返回 HTML 内容。

6. 浏览器解析 HTML

目标：浏览器解析 HTML 结构，构建页面

浏览器解析 HTML 页面时，执行以下步骤：

  • 解析 HTML，构建 DOM 树

  • 解析 CSS，生成 CSSOM 树

  • 解析 JavaScript

    a.如果 script 不是 async/defer，会 阻塞解析

    b.async：异步加载并立即执行

    c.defer：异步加载，等 HTML 解析完成后执行

  • 合并 DOM 和 CSSOM，构建渲染树

  • 计算布局（Layout）

    a.确定元素的大小、位置

  • 绘制（Painting）

    a.将元素渲染到屏幕

7. 加载外部资源

目标：加载 CSS、JS、图片等外部资源

  • CSS：影响页面布局，会阻塞渲染（但不会阻塞 HTML 解析）。

  • JS：

    a.可能修改 DOM（导致重排）。

    b.async/defer 可优化加载顺序。

  • 图片、视频、字体：

  • 通过 Lazy Loading 延迟加载，提高性能。

8. 浏览器渲染页面

最终，浏览器将渲染完成的页面 绘制到屏幕：

  • 栅格化（分成像素块）。
  • 合成图层（不同层级合成）。
  • GPU 加速（硬件加速渲染）。
9. 用户交互 & 浏览器事件
  • JS 监听用户事件（点击、滚动等）。
  • 浏览器根据用户操作重新渲染页面（如 requestAnimationFrame）。
  • 回流（Reflow）和重绘（Repaint） ：

a.回流：布局改变（影响性能）。

b.重绘：颜色、阴影等改变（较轻量）。

over

avatar
文章
阅读
粉丝