1.脚本优化
(1)减少重绘和回流
(2)缓存Dom选择与计算
(3)缓存列表length
(4)尽量使用事件代码,避免批量绑定事件
(5)尽量使用ID选择器
(6)使用touchstart、touchend代替click
2.加载优化:
(1)合并css、javaScript
(2)合并小图片,使用雪碧图
(3)缓存一切可缓存的资源
(4)使用外联式引用css、javascript
(5)使用首屏加载、使用按需加载、使用滚屏加载
(6)减少Cookie
(7)避免重定向
(8)异步加载第三方资源
3.渲染优化
(1)html使用viewport
(2)减少Dom节点
(3)适当使用Canvas动画
(4)Touchmove、Scrollg事件会导致多次渲染
(5)使用(css3 transitions、css3 3D transforms、Opacity、Canvas、Video)来触发GPU渲染。
4.css优化
(1)css写在头部,JavaScript写在尾部或异步
(2)图片尽量避免使用DataURL
(3)尽量避免在HTML标签中写Style属性
(4)避免css表达式
(5)避免css规则
(6)正确使用Display的属性
(7)值为0时不需要任何单位
(8)不声明过多的font-size
(9)不要滥用web字体
(10)标准化各种浏览器前缀
(11)避免让选择符看起来正则表达式
5.图片优化
(1)图片不宽于640
(2)首次加载不大于1014KB
(3)使用css3、SVG、Iconfont代替图片
(4)webP优于JPG、PNG8优于GIF
总结:pc优化手段在mobile同样适用