# 1 性能优化方式
⚡ 30 秒速记
- 按用户感知的时间线分四段：加载（网络+体积）、渲染（首屏绘制）、交互（响应延迟）、运行时（长任务、内存）
- 加载：路由懒加载、
CDN、gzip/br、关键资源preload、图片按设备出尺寸 + 现代格式 - 渲染：关键
CSS内联、JS加defer、骨架屏、避免首屏图懒加载（会拖垮LCP） - 交互与运行时：长任务分片或搬进
Worker、动画只动transform/opacity、长列表虚拟滚动 - 先量再改：
Performance看阶段耗时、Coverage看代码使用率、线上看LCP/INP/CLS的P75
性能优化要结合具体加载环节处理，当前资料明确给出的方式是对外部域名进行 DNS 预解析。 浏览器访问域名前需要先把域名解析成对应的 IP，这个过程本身会消耗时间。通过提前声明 dns-prefetch，可以让浏览器预先完成解析，为后续资源请求减少这部分等待。它适合页面确定会访问某个外部域名的场景，其他优化方式还需要结合资源和页面情况判断。
# 1.1 DNS 预解析
⚡ 30 秒速记
dns-prefetch只提前把域名解析成IP，不建立连接- 它适合页面后续确定会访问的第三方域名，当前主域通常已在导航时解析
- 域名过多会抢占网络与解析资源，隐私敏感场景还会提前暴露访问意图
- 需要连
TCP/TLS一并提前建立时用preconnect，但只保留少量关键源
DNS 预解析就是让浏览器提前把目标域名解析成对应的 IP，减少真正请求资源时的等待。 使用时可以在页面中添加 <link rel="dns-prefetch" href="//blog.poetries.top">，提示浏览器提前处理这个域名。它优化的是域名解析阶段，并不代表资源内容已经被下载。一般用于页面后续确定会访问的外部域名，没有相关请求时则不会带来实际收益。
DNS解析也是需要时间的，可以通过预解析的方式来预先获得域名所对应的IP
<link rel="dns-prefetch" href="//blog.poetries.top">
# 1.2 缓存
⚡ 30 秒速记
- 先判强缓存：
Cache-Control: max-age新鲜时直接用本地副本，不发请求 - 过期后走协商缓存：
ETag/If-None-Match或Last-Modified/If-Modified-Since - 未变化返回
304复用响应体，已变化返回200和新内容 - 带内容哈希的静态资源适合长期缓存，
HTML通常需要及时验证 no-cache是“可以存但每次验证”，no-store才是“完全不存”
浏览器缓存分为强缓存和协商缓存，前者在有效期内直接使用本地资源，后者会向服务端确认资源是否变化。 强缓存通常由 Cache-Control: max-age 控制，且 Cache-Control 的优先级高于 Expires。缓存过期后，可通过 ETag 与 If-None-Match，或 Last-Modified 与 If-Modified-Since 进行协商；资源未变时返回 304。频繁变化的资源可用 no-cache 配合 ETag，完全不需要缓存时才使用 no-store，带文件指纹的代码文件则适合长期缓存。
