web前端优化

• 请减少HTTP请求
  当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。
  网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。
  解决办法：
  合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。
• 合理设置 HTTP缓存
• 合理重绘，尽量少重排
  基本原理：
  Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。
  Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，Reflow是低效的，应当尽量避免。
• 减少dom操作
  解决办法：
  减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。
• 使用JSON格式来进行数据交换
• 高效使用HTML标签和CSS样式，将 CSS放在 HEAD中
  对css选择符按照开销从小到大的顺序梳理一下：
  ID选择符 #box
  类选择符 .box
  标签 div
  伪类和伪元素 a:hover
  解决办法：
  当页面被触发引起回流（reflow）的时候，低效的选择符依然会引发更高的开销，所以请避免低效。
• 使用CDN加速（内容分发网络），将外部脚本置底
• 精简CSS和懒加载JS文件,减少请求次数
• 压缩资源，图片视情况使用懒加载或者Sprite技术
  解决办法：
  1.缩小图片分辨率；
  2.改变图片格式；
  3.降低图片保存质量。
• 注意控制Cookie大小和污染