性能优化与测试

性能优化

1. 渲染优化

• 减少回流和重绘，加速页面呈现
• 高频动画尽量脱离文档流，使用定位（因为会引起回流）

《浏览器渲染》

2. 代码优化

• Html 优化（减少 Dom 数量，延迟加载）
• Css 优化（将样式表置顶，避免 CSS 表达式，图片优化等）
• Js 优化，抽离公共方法和模块，编写更加优雅的代码等
• vue 中，不需要响应式的可以将其冻结（Object.freeze()），如常见的长列表数据

3. 资源优化

• 资源的合并与压缩
• 图片格式的选择: JPG vs PNG vs WebP
• 图片加载优化: 懒加载、渐进式图片、响应式图片字体优化

4. 构建优化

• webpack的优化配置
• webpack的依赖优化
• 基于webpack的代码拆分/资源压缩/资源持久化缓存
• React按需加载实现方式

5. 传输加载优化

• 必学必会: Gzip& Keep Alive
• HTTP 资源缓存
• Service Worker 实现渐进式应用
• HTTP/2加速传输
• SSR加速渲染

6. 前沿优化解决方案

• 拯救移动端图标 – SVG/Flexbox优化布局
• 优化资源加载的顺序/预渲染页面
• Windowing(窗口化)提高列表性能
• 使用骨架组件减少布局移动(Layout Shift)

测试工具

性能优化指标和工具

• RAIL测量模型
• WebPageTest评估网站性能
• 使用LightHouse分析性能
• 使用Chrome DevTools分析性能
• 常用的性能测量APIs