首屏加载优化

明白浏览器加载网页的过程

用户请求 --> 网络响应 --> HTML解析 --> JS 下载 --> JS 执行 --> Vue 初始化 --> 首屏渲染

各阶段优化点

网络传输

• CDN
• 资源压缩
• 资源缓存
  • 资源强缓存
  • 资源协商缓存
• HTTP2
• 合并请求
  • vite 等打包工具
• 代码分割
  • 路由代码分割
  • 组件代码分割
  • vite 等打包工具

JS 执行

• 懒加载
  • 路由懒加载 import('/')
  • 组件懒加载 (异步组件) <Suspense> defineAsyncComponent
• 预加载
• 优化代码执行

首屏渲染

• SSR
• 骨架屏
• 关键css 内敛

详解 http 缓存技术

缓存技术出现的好处：

• 减少网络请求次数
• 减少服务器负载
• 提高页面加载速度

强缓存

• Cache-Control
  • max-age： 设置最大缓存时间
  • public 允许任何缓存（包括代理服务器）存储响应内容
  • private 仅允许浏览器缓存响应内容
  • no-cache 要求缓存必须在使用前向服务器验证资源的有效性
  • no-store 不允许任何缓存存储响应内容
• Expires： 设置资源过期时间

协商缓存

• Last-Modified | If-Modified-Since： 资源最后修改时间
  • 客户端发送请求时，包含 If-Modified-Since 头，值为资源的最后修改时间
  • 服务器收到请求后，对比资源的最后修改时间与 If-Modified-Since 头的值
  • 如果资源未被修改，则返回 304 状态码，不返回资源内容
  • 如果资源被修改，则返回 200 状态码，返回资源内容
• ETag | If-None-Match： 资源的唯一标识符 ETag > Last-Modified
  • 客户端发送请求时，包含 If-None-Match 头，值为资源的唯一标识符
  • 服务器收到请求后，对比资源的唯一标识符与 If-None-Match 头的值
  • 如果资源未被修改，则返回 304 状态码，不返回资源内容
  • 如果资源被修改，则返回 200 状态码，返回资源内容