Hi! 这里是JustHappy，我想在日常开发中，"页面性能"、"加载性能"吧啦 吧啦的，似乎是各个组周会、社招面试、甚至很多校招面试经常聊到的话题，当然也 有人说"前端哪有什么性能优化"，但是怎么说，"提升30%速度"，"降低1s"延迟这种 字眼还是很有"冲击力"的，至少看起来是😂，话不多说，咱开始吧！
本文参考材料：
2.Establish network connections early to improve perceived page speed
当我们开始访问一个网址
相信大家都知道这个过程，我们会将URL先发送给DNS(域名解析服务器)，DNS服务器最终会返回一个真实的服务器IP地址，我们访问服务器（建立TCP连接），服务器就给我们发送HTML、JS、CSS等资源，于是乎我们就成功的访问了一个网页，很简单，是吗？
真的就是这么简单的吗？以上是理想状态下只进行了一次DNS解析的情况，在实际的场景中，我们往往需要进行多次DNS解析，比方说页面中存在其他URL引入的资源 ，最常见的就是图片、字体什么的，或者说页面中存在一个iframe，等等等等。
于是乎我们就得关注 DNS解析优化
DNS解析优化
其实DNS解析所需的带宽是非常小的，但是完成解析的延迟有些高，DNS通常需要20-120毫秒来查找给定主机名的IP地址，以下是几种情况的延迟对比。
| 网络环境 | DNS解析耗时（ms） | 说明 |
|---|---|---|
| 本地缓存命中 | 0～1 ms | 几乎瞬间返回 |
| 浏览器发起 + ISP DNS | 20～120 ms | 用户常见真实环境，含网络延迟 |
| 跨地域 + CNAME跳转 | 100～300+ ms | 若需要多次解析、链路复杂 |
可以看到有些情况的延迟是不可避免的，所以我们要么避免出现这种情况，要么尽量减小这个延迟的影响
我们如何检测DNS耗时呢？最简单的就是使用 chrome dev-tool 去查看DNS Lookup
注意：这个指标只会在访问一个新域名或者清除对应域名的DNS缓存才会出现
在「Network面板」点击某个请求 → 选中「Timing」面板，就可以看到
我们有以下两种解析DNS的情况
用户输入网址或点击链接后的首次DNS解析（页面主文档加载前）
如果是一台新电脑，用户通过输入网址的方式去访问咱的网站，那么当前我们本地是不存在任何关于这个网站的DNS缓存的，在这个在时机我们往往不能只通过"纯前端"的方式去介入性能优化
在开发中我们应该注意
- 减少首屏依赖的第三方域名
- 不必要地使用多个CDN域名会造成多个DNS查询、连接、TLS等成本。
- 将资源整合在主域或同源CDN上可有效减少解析压力。
在服务端或者架构层我们可以这么做（举两点说明）
-
使用CDN并开启智能DNS
- CDN提供基于访问者IP进行"就近解析"的DNS服务
- 避免全国用户都指向一个中心节点
-
设置合理TTL，兼顾缓存与变更灵活性
- 建议非频繁变更的域名 TTL 设置为 600s ~ 3600s
-
通过链路设计减少跳转链
减少页面加载过程中出现的多次重定向（如 301、302） 。每一次重定向可能涉及新的 DNS 解析，增加延迟。例如：
- 用户访问
example.com
➡️ 跳转到www.example.com
➡️ 再跳转到cdn.example.com/home
这中间可能涉及 3 次 DNS 解析和 3 次 HTTP 请求
- 用户访问
网页加载中资源触发的DNS解析（可能会触发很多次）
使用 dns-prefetch 进行DNS预解析
原理 ：让浏览器在空闲时间提前解析域名，但不建立连接。
适用场景：页面上有第三方资源（如字体、统计脚本、广告）来自其他域名。
示例：
html
<link rel="dns-prefetch" href="//cdn.example.com">
使用 preconnet 建立预连接
原理 ：不仅DNS解析，还预建TCP连接甚至TLS握手。
适用场景：对性能要求高的首屏资源域名。
示例：
html
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
看起来似乎效果差不多，那具体有什么不同呢？
<link rel="dns-prefetch" href="//example.com">
- 作用 ：仅提前进行 DNS 解析
- ❌ 不建立 TCP/TLS 连接
- 📦 网络开销小，浏览器空闲时执行
- 📌 适合低优先级资源、非关键第三方域名
<link rel="preconnect" href="https://example.com">
- 提前进行 DNS 解析 + TCP 连接 + TLS 握手
- 🚀 适用于关键资源域名（如字体、API）
- 📌 可加快首次请求速度
- ⚠️ 有一定网络消耗，建议只用在重要资源上
OK，有关DNS解析优化我们就先聊到这里，下次见