前端如何优化网站性能？

一、减小 HTTP 请求数量

在浏览器与服务器进行通讯时，主要是经过 HTTP 进行通讯。浏览器与服务器须要通过三次握手，每次握手须要花费大量时间。并且不一样浏览器对资源文件并发请求数量有限（不一样浏览器容许并发数），一旦 HTTP 请求数量达到必定数量，资源请求就存在等待状态，这是很致命的，所以减小 HTTP 的请求数量能够很大程度上对网站性能进行优化。

CSS Sprites

国内俗称CSS精灵，这是将多张图片合并成一张图片达到减小HTTP请求的一种解决方案，能够经过CSS的background属性来访问图片内容。这种方案同时还能够减小图片总字节数。

合并 CSS 和 JS 文件

如今前端有不少工程化打包工具，如：grunt、gulp、webpack等。为了减小 HTTP 请求数量，能够经过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

采用 lazyLoad

俗称懒加载，能够控制网页上的内容在一开始无需加载，不须要发请求，等到用户操做真正须要的时候当即加载出内容。这样就控制了网页资源一次性请求数量。

二、控制资源文件加载优先级

浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应连接内容，为了第一时间展现页面给用户，就须要将CSS提早加载，不要受 JS 加载影响。

通常状况下都是CSS在头部，JS在底部。

三、利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，若是资源已经存在就不须要到服务器从新请求该资源，直接在本地读取该资源。

四、减小重排（Reflow）

基本原理：重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会从新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的全部其它结点的visibility属性，这也是Reflow低效的缘由。若是Reflow的过于频繁，CPU使用率就会急剧上升。

减小Reflow，若是须要在DOM操做时添加样式，尽可能使用 增长class属性，而不是经过style操做样式。

五、减小 DOM 操做

六、图标使用 IconFont 替换