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

加载优化：一、合并css、JavaScript
　　　　　二、合并小图片，使用精灵图
　　　　　三、缓存一切可缓存的资源
　　　　　四、使用长cache
　　　　　五、使用外联式引用css、JavaScript
　　　　　六、压缩HTML、CSS、JavaScript
　　　　　七、使用Gzip压缩内容
　　　　　八、使用首屏加载
　　　　　九、使用按需加载
　　　　　十、使用滚屏加载
　　　　　十一、经过Media Query加载
　　　　　十二、增长loading进度条
　　　　　1三、减小cookie
　　　　　1四、避免重定向
　　　　　1五、异步加载第三方资源
图片优化：一、使用智图 http://zhitu.tencent.com/
　　　　　二、使用css三、svg、iconfont代替图片
　　　　　三、使用srcset
　　　　　四、webP优于jpg
　　　　　五、png8优于gif
　　　　　六、首次加载不超过1014kb（基于3秒联通平均网速所能达到值）
　　　　　七、图片不宽于640

css优化：一、css写在头部，JavaScript写在尾部或异步
　　　　  二、不要让link、script、img、iframe等标签出现空的src和href
　　　　  三、尽可能避免重设图片大小
 　　　　 四、图片尽可能避免使用dataUrl
　　　　  五、尽可能避免写标签属性
　　　　  六、避免css表达式
 　　　　 七、清除空的css
　　　　  八、正确使用display的属性
　　　　  九、不滥用float
　　　　  十、不滥用web字体
　　　　  十一、不声明过多的font-size
　　　　  十二、值为0的时候不须要任何单位
　　　　  1三、标准化各类浏览器的前缀
　　　　  1四、避免冗长的选择符

脚本优化：一、减小重绘和回流
　　　　　二、缓存DOM选择与计算
　　　　　三、尽可能使用事件代理，避免批量绑定事件
　　　　　四、尽可能使用ID选择器
　　　　　五、使用touchstart、touchend代替click
　　　　　六、合理使用节流和防抖
　　　　　七、避免没必要要的跳转，合理取消浏览器默认事件
　　　　　八、避免404
　　　　　九、配置ETags
　　　　　十、少用全局变量，尽可能用局部变量
　　　　    十一、多个变量或常量合并声明

渲染优化：一、HTML使用viewport
　　　　    二、减小DOM节点
　　　　    三、尽可能使用css3动画
　　　　　四、合理使用requestAnimationFrame动画代替setTimeout
　　　　　五、适当使用canvas动画
　　　　　六、Touchmove、Scroll事件会致使屡次渲染
　　　　　七、使用css3 transitions、css3 3D transforms、Opacity、Canvas、WebGL、Video来触发GPU渲染

 

 

 

 

 

总结一下：

　　使用正确的盒子嵌套，避免空标签，空属性
　　避免冗长的选择器
　　标准化各类浏览器的前缀
　　使用精灵图，减小与服务器请求
　　避免使用标签属性
　　值为0的时候不须要带单位
　　尽可能不要重设图片尺寸
　　webP优于jpg，png8优于gif
　　使用节流和防抖
　　使用预加载和懒加载，异步加载第三方资源
　　使用压缩工具，合并压缩HTML、css、JavaScript
　　使用长链接
　　减小cookie
　　使用事件委托
　　避免没必要要的跳转，合理使用取消浏览器默认事件
　　少用全局变量，多用局部变量，多个变量或常量能够合并声明
　　合理使用requestAnimationFrame动画代替setTimeout