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