前端性能优化

首屏加载优化

• SSR 终极方案

思路

是什么原因导致首屏加载慢？

• 网络延迟
• 资源太大

解决方案

网络延迟

• cdn 用户节点就近
• preload
• prerender

资源太大

• 分包 chunk
• 懒加载
• 公共资源 vender
• 缓存（强缓存（Expire、Cache-Control ））、协商缓存（Last-Modified、If-Modified-Since、Etag、If-None-Match）、策略缓存 service-worker)
• 服务端渲染
• 局部 SSR （落地页、广告页、营销活动页）
• pwa (冷门)

解决方案 -指标来衡量

• FP（First Paint 首次绘制）
• FCP （First Contentful Paint ）
  以上两个浏览器提供的 API 计算
• FMP （First Meaningful Paint）
• LCP （Largest Contentful Paint）

这些性能监听或者上报的代码，我们通常只会写一次，web-tracker

• 性能采集
  • Performance
  • Mutation Observer
• 用户行为采集
  • 无