前端性能优化&&网站性能优化

加载优化：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