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

---

title: 移动H5前端性能优化注意点
date: 2016-11-11 17:40:13
tags: HTML5
thumbnail: http://images.17173.com/2015/news/2015/05/28/hxz0528html01.jpg

---

希望得到的最好的效果：

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渲染