移动H5前端性能优化指南（网上整理）

时间：2023-02-10 06:03:29

PC优化手段在手机端同样适用，在手机端提出3秒钟渲染完成首屏指标，首屏加载3秒完成或使用Loading，基于联通3G网络平均338KB（2.71Mb/s），所以首屏资源不应该超过1014KB；手机端因手机配置原因，除加载外渲染速度也是优化重点。

一、加载优化

  1. 合并CSS、JavaScript文件；
  2. 合并小图片，使用雪碧图；
  3. 缓存一切可缓存的资源；
  4. 使用长Cache；
  5. 使用外联式引用CSS、JavaScript；
  6. 压缩HTML、CSS、JavaScript；
  7. 启用GZip；
  8. 使用首屏加载；
  9. 使用按需加载；
  10. 使用滚屏加载；
  11. 通过Media Query 加载；
  12. 增加 Loading 进度条；
  13. 减少 Cookie；
  14. 避免重定向；
  15. 异步加载第三方资源；

二、图片优化

  1. 使用智图 http://zhitu.tencent.com/；
  2. 使用（css3、SVG、IconFont）代替图片；
  3. 使用 Srcset；
  4. webP优于JPG；
  5. PNG8 优于GIF；
  6. 首次加载不大于1014KB；
  7. 图片不宽于640；

三、脚本优化

  1. 减少重绘和回流；
  2. 缓存Dom选择与计算；
  3. 缓存列表 .length；
  4. 尽量使用事件代理，避免批量绑定事件；
  5. 尽量使用 ID 选择器；
  6. 使用 touchstart、touchend代替click；

四、CSS优化

  1. CSS写在头部，JavaScript 写在尾部或异步；
  2. 避免图片和iframe等的空src；
  3. 尽量避免重设图片大小；
  4. 尽量避免写在HTML 标签中写Style属性；
  5. 避免CSS表达式；
  6. 移除空的CSS规则；
  7. 正确使用Display的属性；
  8. 不滥用float；
  9. 不滥用Web字体；
  10. 不声明过多的font-size；
  11. 值为0时不需要任何单位；
  12. 标准化各种浏览器前缀；
  13. 避免让选择符看起来像正则表达式；
  14. 图片尽量避免使用DataURL；

五、渲染优化

  1. HTML 使用Viewport；
  2. 减少Dom节点；
  3. 尽量使用CSS3动画；
  4. 合理使用requestAnimationFrame动画代替setTimeout；
  5. 适当使用Canvas动画；
  6. 使用（CSS3 transitions、CSS3 3Dtransforms、Opacity、Canvas、WebGL、Video）来触发 GPU 渲染
  7. Touchmove、Scroll 事件会导致多次渲染；
  8. absolute动画元素，优化安卓性能
标签：

相关文章