前端首屏性能优化

页面渲染优化

减少资源大小

代码压缩
GZIP
图片压缩
代码拆分

减少http请求

http强缓存
Sevice Worker
本地存储localStorage
合并请求

提高http请求头响应速度

CDN
DNS Prefetch

优化资源加载时机

按需加载
懒加载
预加载

优化资源、内容加载方式

客户端内H5页面可考虑离线等方式
内容直出

资源加载优化

优化html代码

js外链放在底部
css外链放在顶部
减少dom数量

优化js/css

使用webworker
长任务分片执行
减少回流重绘
减低css选择器复杂性

优化动画效果

使用requestAnimationFrame
使用transform和opacity实现动画
合理使用will-change或translateZ来提升某些元素判断的合成