前端优化有哪些点
减少http 请求（雪碧图， 文件合并）
CSS雪碧 即CSS Sprites，也有人叫它CSS精灵，是一种CSS图像合并技术，
该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
缓存
使用缓存可以减少向服务器的请求数，节省加载时间，
所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）。
1. 缓存一切可缓存的资源
2. 使用长Cache（使用时间戳更新Cache）
3. 使用外联式引用CSS、JavaScript
文件压缩
1. 开发生成的js、css文件进过压缩后去掉注释，空格等，减少http请求资源。
2. 启用gZip压缩。
减少DOM节点
每多一层，页面在渲染的时候，查询就会多一层，影响效率。
无阻塞
- css写在文件开头部分用<link />的方式引入。
- 尽量不在页面中通过style的方式添加样式。
- js的引用写在文件底部。
避免跳转
在链接最后面都加上 '/' 反斜杠，比如： http://www.wolongdata.com/news/
避免压缩
如果图片需要100*100这样大的，就不要用一张大小为500 * 500的，然后压缩成100 * 100大小的。
按需加载
1. 懒加载。
2. 滚动加载。
3. 通过Media Query加载。
参考文献
动画优化要点总结
- 执行动画尽量使用CSS3 keyframes和 trainsition
- 如果需要JS执行动画，使用requestAnimationFrame,或者Velocity,避免使用jQuery动画,setTimeout,setInterval。
- js动画的优点是，我们能随时控制开始，暂停，停止，而CSS不行。缺点是没办法像css这样优化，因为js动画是在主线程上跑的。
- 动画尽量使用transform,opacity，尽量避免left/padding/background-position等
- 尽量避免不必要的动画发生（废话）点击这里
- 尽可能的为产生动画的元素使用fixed或absolute的position
- 阴影渐显动画尽量用伪类的opacity来实现。点击这里
- 使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。(来自前端农民工)
- 使用Chrome Timeline工具检查
- 时刻把浏览器处理流程记在心里
