浏览器发起一次请求的流程：

https://www.w3.org/blog/2012/09/performance-timing-information/ (opens in a new tab)

https://developer.mozilla.org/zh-CN/docs/Web/API/Navigation_timing_api (opens in a new tab)

性能优化可以入手的方面

图片优化

• 图片压缩、裁切、格式转换(webp、avif)、缩放、锐化等
• 小图片使用 Data Urls (opens in a new tab)
• 使用字体图标 iconfont 代替图片图标
• 压缩字体文件
• 图片延迟加载
• 响应式图片

网络优化

• 减少 HTTP 请求
• 避免重定向
• 避免空链接：<img src="">影响页面重排，阻止页面渲染
• dns-prefetch 预解析域名，并缓存起来。
• 客户端网络库劫持，利用 DOH 一次性获取多个域名的 IP 地址，减少 DNS 查询次数
• CDN 节点的 HTTP2 升级，使用 gzip、brotli 等压缩
• CDN 路由监控，将用户请求分发到最近的节点

缓存与内置

• 静态资源使用 CDN
• http 缓存
  • 强缓存：
    • expires： 固定的过期时间，但受本地时间的影响；
    • cache-control： 相对时间；
  • 协商缓存：
    • last-modified： 表明资源的最后修改时间，但只能精准到秒
    • Etag： 文件内容 MD5 值，分布式环境不适用
• 本地缓存
  • 减少 cookie 大小
  • localStorage：初始数据存储；组件代码存储；
  • APP 缓存：APP 离线包

首屏优化

• 使用 SSG(Static Site Generator) 、SSR(Server-Side Rendering) 或者 ISR(Incremental Static Regeneration) 渲染页面
• 使用骨架屏