前端首屏性能优化分为资源加载优化和页面渲染优化

资源加载优化

1.减少资源大小

• 代码压缩
• Gzip
• 图片压缩
• 代码拆分

2.减少http请求次数

• http强缓存
• Service Worker
• 本地存储(localStorage等)
• 合并请求(nginx-http-concat模块，雪碧图)

3.提高http请求响应速度

• CDN
• http弱缓存
• DNS Prefetch
• http2

4.优化资源加载时机

• 按需加载
• 懒加载
• 预加载(preload等)

5.优化资源内容加载方式

• 客户端内h5可考虑离线包等方式
• 内容直出(SSR)

页面渲染优化

1.优化html代码

• css外链放顶部
• js外链放底部
• 减少DOM数量

2.优化js、css代码

• 使用webworker
• 长任务分片执行
• 减少重排、重绘
• 降低css选择器复杂性

3.优化动画效果

• 使用requestAnimationFrame
• 使用tranform和opacity属性实现动画
• 合理使用will-change和translateZ来提升某些元素到新的合成层