前端性能优化

1.　　请减少HTTP请求　　

    网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。所以，请减少HTTP请求。

　合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。

2.　　请正确理解 Repaint（重绘） 和 Reflow（重排）

Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。

    上面提到通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式；　有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。

总之，因为 Reflow 有时确实不可避免，所以只能尽可能限制Reflow的影响范围。

3.　　请减少对DOM的操作　

修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。

　　减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。

　　注：在IE中:hover会降低响应速度。

4.　　使用JSON格式来进行数据交换

5.　　高效使用HTML标签和CSS样式

6.　　使用CDN加速（内容分发网络）

7.　　将CSS和JS放到外部文件中引用，CSS放头，JS放尾　

8.　　精简CSS和JS文件

9.      压缩图片和使用图片Sprite技术

    

注：其实压缩图片和图片精灵是两个方面的技术，可是既然都是关于图片的优化还是放到一块吧。

　　现在由于工作的细分，专业的前端工程师已经少有机会去切图了，可是关于图片压缩还是得略微了解，一般图片压缩的方式有：

　　1.缩小图片分辨率；

　　2.改变图片格式；

　　3.降低图片保存质量。

　　关于图片精灵(Sprite)技术就和我们工作直接相关，不管是在CSS中的图片还是在HTML结构中的图片都会产生HTTP请求，前端优化的第一条就是减少请求数，最直接有效的方法是使用图片精灵（CSS Sprite）。图片精灵就是把许多图片放到一张大图片里面，通过CSS来显示图片的一部分。

　　至于图片精灵的操作细节就不多做介绍了，网上相关内容很多。

10.    注意控制Cookie大小和污染