web应用性能优化
优化关键指标
- FP首屏绘制：页面开始展示的时间点-开始请求的时间点
- FCP：首屏内容绘制
- TTI可交互时间：domContentLoadedEventEnd - navigationStart
- 最大内容绘制LCP：可用通过PerformanceObserver来捕获
- 首次有效绘制FMP：捕获首次渲染的加载性能
大方向分为工程化和细节处理
工程化
- Webpack本身提供的优化，Base64，资源压缩，Tree shaking，拆包chunk
- 客户端Gzip离线包，服务器资源Gzip压缩
- 服务端渲染，客户端预渲染
- CDN静态资源
- JS瘦身，ES Module，动态Import，动态Polyfill
- 浏览器合理设置缓存策略
- 减少重定向
- 骨架图
- 数据预取，包括接口数据，和加载详情页图片
细节方向（代码层面）
- 使用 prefetch / preload 预加载等新特性
- 图片，图片占位，图片懒加载。 雪碧图
- async（加载完当前js立即执行）/defer(所有资源加载完之后执行js)
- 减少Dom的操作，减少重排重绘
- 从客户端层面，首屏减少和客户端交互，合并接口请求
- 数据缓存
- 首页不加载不可视组件
- 减少组件层级
- 优先使用Flex布局,css动画
常见卡顿解决方案
- CSS动画效率比JS高，css可以用GPU加速，3d加速。如果非要用JS动画，可以用requestAnimationFrame
- 批量进行DOM操作，固定图片容器大小，避免屏幕抖动
- 减少重绘重排
- 节流和防抖
- 减少临时大对象产生，利用对象缓存，主要是减少内存碎片
- 异步操作，IntersectionObserver，PostMessage，RequestIdleCallback
常用分析工具（Chrome devtools）
- performance.timing
- lighthouse
- components（react)
