加载优化:1、合并css、JavaScript
2、合并小图片,使用精灵图
3、缓存一切可缓存的资源
4、使用长cache
5、使用外联式引用css、JavaScript
6、压缩HTML、CSS、JavaScript
7、使用Gzip压缩内容
8、使用首屏加载
9、使用按需加载
10、使用滚屏加载
11、通过Media Query加载
12、增加loading进度条
13、减少cookie
14、避免重定向
15、异步加载第三方资源
图片优化:1、使用智图 http://zhitu.tencent.com/
2、使用css3、svg、iconfont代替图片
3、使用srcset
4、webP优于jpg
5、png8优于gif
6、首次加载不超过1014kb(基于3秒联通平均网速所能达到值)
7、图片不宽于640
css优化:1、css写在头部,JavaScript写在尾部或异步
2、不要让link、script、img、iframe等标签出现空的src和href
3、尽量避免重设图片大小
4、图片尽量避免使用dataUrl
5、尽量避免写标签属性
6、避免css表达式
7、清除空的css
8、正确使用display的属性
9、不滥用float
10、不滥用web字体
11、不声明过多的font-size
12、值为0的时候不需要任何单位
13、标准化各种浏览器的前缀
14、避免冗长的选择符
脚本优化:1、减少重绘和回流
2、缓存DOM选择与计算
3、尽量使用事件代理,避免批量绑定事件
4、尽量使用ID选择器
5、使用touchstart、touchend代替click
6、合理使用节流和防抖
7、避免不必要的跳转,合理取消浏览器默认事件
8、避免404
9、配置ETags
10、少用全局变量,尽量用局部变量
11、多个变量或常量合并声明
渲染优化: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渲染
总结一下:
使用正确的盒子嵌套,避免空标签,空属性
避免冗长的选择器
标准化各种浏览器的前缀
使用精灵图,减少与服务器请求
避免使用标签属性
值为0的时候不需要带单位
尽量不要重设图片尺寸
webP优于jpg,png8优于gif
使用节流和防抖
使用预加载和懒加载,异步加载第三方资源
使用压缩工具,合并压缩HTML、css、JavaScript
使用长连接
减少cookie
使用事件委托
避免不必要的跳转,合理使用取消浏览器默认事件
少用全局变量,多用局部变量,多个变量或常量可以合并声明
合理使用requestAnimationFrame动画代替setTimeout