性能指标：
- FCP 关键页面要求1.5s以内，一般2s以内
- LCP 关键页面2s以内，一般页面2.5以内
- CLS 0.1 以内
- FID 100ms以内 （新指标 web vitals）
- Lighthouse 总评分在
性能优化--获取资源
加快网络
- CDN
- preload（这个本来不算加快网络，但是能提前发起资源的获取）
- prefetch
- preconnect
- dns-prefetch
- 客户端提前缓存dns或者使用httpdns
- http2：多路复用、头部压缩、服务端推送
减小资源大小
- gzip
- 代码分割（代码使用情况performance、coverage）；只加载当前页面用到的代码；甚至开始只加载满足首屏和必要功能的代码，再按需加载。
- esm 的Tree shaking
- 图片按需lazyload；尽量webp；使用合适尺寸的图片；尽可能利用 CSS3 效果代替图片
- iconfont
- 减少 Cookie 大小，静态资源使用无cookie的域名
缓存
- cache-control、etag、last-modify
- service-worker
- 第三方库单独缓存
性能优化--运行时
- css放head，js放在body最后；减少重绘、重排；排除可能因为js加载导致停止解析html
- 代码中尽量减少强制回流（可从performance面板中看到强制回流的信息）
- react开发中采用必要技巧，减少不必要的组件更新
- web-worker, 部分单独开一个线程处理，缓解主线程的压力
- 尽量减少dom元素嵌套层级，提高css的准确性
- 数据预加载（可以和服务员约定规则或者直接使用http2）
- 动画元素（变化频率高的元素），给单独的渲染层，translate3d、will-change
- 骨架屏（糊弄用户）
- 尽可能使用css3动画效果，而不是js的
- 合理使用requestAnimationFrame处理动画
- flexbox布局性能好
- 降低 CSS 选择器的复杂性
听取performance建议，就可以再首屏时做的很好
