PC优化手段在Mobile侧同样适用。Mobile侧因手机配置原因,除加载外渲染速度也是优化重点。优化可从以下方面出发:
一、加载优化
1、合并css,javascript。
2、合并小图片,适用雪碧图。
3、缓存一切可以缓存的资源。
4、使用长Cache。
5、使用外联引用css,JavaScript。
6、压缩HTML、css、JavaScript。
7、启用GZip
8、使用首屏加载、按需加载、滚屏加载
9、通过Media Query加载
10、增加Loading进度条
11、减少cookie
12、避免重定向
13、异步加载第三方资源
二、图片优化
1、使用智图http://zhitu.tencent.com/
2、使用(css、SVG、IconFont)代替图片
3、使用Srecset
4、webP优于JPG
5、PNG8优于GIF
6、首次加载不大于1014KB(基于3秒联通平均网速所能达到值)
7、图片不宽于640
三、脚本优化
1、减少重绘和回流
2、缓存Dom选择与计算
3、缓存列表length
4、尽量使用事件代理,避免批量绑定事件
5、尽量使用ID选择器
6、使用touchStart、touchEnd代替click
四、css优化
1、css写在头部,JavaScript写在尾部或异步
2、避免图片和iframe等空的src
3、尽量避免重设图片的大小
4、图片尽量避免使用DataURL
5、尽量避免写在HTML标签中写style属性
6、避免css表达式
7、移除空的css规则
8、正确使用display的属性
9、不滥用float
10、不拉用web字体
11、不声明过多的font-size
12、值为0时不需要设置任何单位
13、标准化各种浏览器前缀
14、避免让选择符看起来像正则表达式
五、渲染优化
1、html使用viewport
2、减少dom节点
3、尽量使用css3动画
4、合理使用requestAnimationFrame动画代替setTimeout
5、适当使用canvas动画
6、touchmove,scroll事件会导致多次渲染
7、使用(css3 transitions, css3 3D transforms, opacity, canvas,WebGL,video)来触发GPU渲染。