移动H5前端性能优化注意点

希望得到的最好的效果:

PC优化手段在Mobile侧同样适用

  1. 最多三秒钟渲染完成单屏或者使用Loading
  2. 基于3G/4G移动网络下,每屏幕资源不超过1024KB
加载优化
  • 合并CSS、JavaScript
  • 合并小图片、使用雪碧图
  • 缓存一切可以缓存的资源,部分资源css、js使用src="abc.css?cacheVersion=1"来控制版本
  • 使用长Cache
  • 压缩HTML、CSS、JS
  • 启用GZip
  • 使用首屏加载
  • 使用按需加载
  • 使用滚屏加载
  • 增加进度指示器
  • 减少Cookie
  • 避免重定向
  • 异步加载第三方资源
CSS优化
  • CSS写在头部,JS写到尾部或者异步
  • 避免图片和iFrame等的SRC为空
  • 尽量避免重设图片大小
  • 图片尽量避免使用DataURL
  • 尽量避免在HTML标签中写Style
  • 避免CSS表达式
  • 移除空的CSS规则
  • 正确使用Display的属性
  • 不滥用Float
  • 不滥用Web字体
  • 不声明过多的Font-size
  • 值为0时候不需要任何单位
  • 标准化各种浏览器的前缀
  • 避免让选择符看起来像正则表达式
图片优化
  • 使用 CSS3、SVG、IconFont代替图片
  • 使用Srcset
  • WebP优于JPG
  • PNG8优于GIF
  • 首次加载不大于1024KB单页
  • 图片不宽于640
脚本优化
  • 减少重绘
  • 缓存Dom选择与计算
  • 缓存列表的长度
  • 尽量使用事件代理,避免批量绑定事件
  • 尽量使用ID选择器
  • 使用touch代理click
渲染优化
  • HTML使用ViewPort
  • 减少Dom节点
  • 尽量使用CSS3动画
  • 合理使用requestAnimationFrame动画代替setTimeout
  • 适当使用Canvas动画
  • touchmove,scroll事件会导致多次渲染
  • 使用 CSS3-transitions、CSS3-3D、Opacity、Canvas、WebGL、Video来触发GPU渲染
评论