「web前端性能优化慢聊🚀」从域名到IP，咱切图仔可以做啥？—— DNS解析优化慢聊

JustHappy
184 阅读4分钟

Hi! 这里是JustHappy，我想在日常开发中，“页面性能”、“加载性能”吧啦 吧啦的，似乎是各个组周会、社招面试、甚至很多校招面试经常聊到的话题，当然也 有人说“前端哪有什么性能优化”，但是怎么说，“提升30%速度”，“降低1s”延迟这种 字眼还是很有“冲击力”的，至少看起来是😂，话不多说，咱开始吧！

本文参考材料：

1.Web Vitals
2.Establish network connections early to improve perceived page speed

image.png

当我们开始访问一个网址

相信大家都知道这个过程，我们会将URL先发送给DNS(域名解析服务器)，DNS服务器最终会返回一个真实的服务器IP地址，我们访问服务器（建立TCP连接），服务器就给我们发送HTML、JS、CSS等资源，于是乎我们就成功的访问了一个网页，很简单，是吗？

image.png

真的就是这么简单的吗？以上是理想状态下只进行了一次DNS解析的情况，在实际的场景中，我们往往需要进行多次DNS解析，比方说页面中存在其他URL引入的资源，最常见的就是图片、字体什么的，或者说页面中存在一个iframe，等等等等。

于是乎我们就得关注 DNS解析优化

DNS解析优化

其实DNS解析所需的带宽是非常小的，但是完成解析的延迟有些高，DNS通常需要20-120毫秒来查找给定主机名的IP地址，以下是几种情况的延迟对比。

网络环境DNS解析耗时（ms）说明
本地缓存命中0～1 ms几乎瞬间返回
浏览器发起 + ISP DNS20～120 ms用户常见真实环境，含网络延迟
跨地域 + CNAME跳转100～300+ ms若需要多次解析、链路复杂

可以看到有些情况的延迟是不可避免的，所以我们要么避免出现这种情况，要么尽量减小这个延迟的影响

我们如何检测DNS耗时呢？最简单的就是使用 chrome dev-tool 去查看DNS Lookup

注意：这个指标只会在访问一个新域名或者清除对应域名的DNS缓存才会出现

在「Network面板」点击某个请求 → 选中「Timing」面板，就可以看到

image.png

我们有以下两种解析DNS的情况

用户输入网址或点击链接后的首次DNS解析（页面主文档加载前）

如果是一台新电脑，用户通过输入网址的方式去访问咱的网站，那么当前我们本地是不存在任何关于这个网站的DNS缓存的，在这个在时机我们往往不能只通过“纯前端”的方式去介入性能优化

在开发中我们应该注意

  • 减少首屏依赖的第三方域名
    • 不必要地使用多个CDN域名会造成多个DNS查询、连接、TLS等成本。
    • 将资源整合在主域或同源CDN上可有效减少解析压力。

在服务端或者架构层我们可以这么做（举两点说明）

  • 使用CDN并开启智能DNS

    1. CDN提供基于访问者IP进行“就近解析”的DNS服务
    2. 避免全国用户都指向一个中心节点

  • 设置合理TTL，兼顾缓存与变更灵活性

    • 建议非频繁变更的域名 TTL 设置为 600s ~ 3600s

  • 通过链路设计减少跳转链

    减少页面加载过程中出现的多次重定向（如 301、302） 。每一次重定向可能涉及新的 DNS 解析，增加延迟。例如：

    • 用户访问 example.com
      ➡️ 跳转到 www.example.com
      ➡️ 再跳转到 cdn.example.com/home

    这中间可能涉及 3 次 DNS 解析和 3 次 HTTP 请求

网页加载中资源触发的DNS解析（可能会触发很多次）

使用 dns-prefetch 进行DNS预解析

原理：让浏览器在空闲时间提前解析域名，但不建立连接。

适用场景：页面上有第三方资源（如字体、统计脚本、广告）来自其他域名。

示例：

<link rel="dns-prefetch" href="//cdn.example.com">

image.png

使用 preconnet 建立预连接

原理：不仅DNS解析，还预建TCP连接甚至TLS握手。

适用场景：对性能要求高的首屏资源域名。

示例：

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>

image.png

看起来似乎效果差不多，那具体有什么不同呢？

<link rel="dns-prefetch" href="//example.com">

  • 作用：仅提前进行 DNS 解析
  • ❌ 不建立 TCP/TLS 连接
  • 📦 网络开销小，浏览器空闲时执行
  • 📌 适合低优先级资源、非关键第三方域名

<link rel="preconnect" href="https://example.com">

  • 提前进行 DNS 解析 + TCP 连接 + TLS 握手
  • 🚀 适用于关键资源域名（如字体、API）
  • 📌 可加快首次请求速度
  • ⚠️ 有一定网络消耗，建议只用在重要资源上

OK，有关DNS解析优化我们就先聊到这里，下次见

avatar
文章
阅读
粉丝