前端首屏性能优化

前端首屏性能优化

  • ~~**页面渲染优化**~~
    • 减少资源大小
    • 减少http请求
    • 提高http请求头响应速度
    • 优化资源加载时机
    • 优化资源、内容加载方式
  • ~~**资源加载优化**~~
    • 优化html代码
    • 优化js/css
    • 优化动画效果

页面渲染优化

减少资源大小

代码压缩
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来提升某些元素判断的合成

你可能感兴趣的:(前端,性能优化)