前端性能优化方案

首先，谈一谈前端性能优化的目的是什么？从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验； 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

减少http请求数

一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程

合并打包文件

如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。另外， CSS、 Javascript、Image 都可以用相应的工具进行压缩，压缩后往往能省下不少空间。

css sprites

图片资源合并，这样做的好处是，当下一次请求的时候浏览器走的是缓存，减少了请求的次数

lazy load

懒加载，对于一些请求资源，用户如果不查看的话不请求，用户需要查看的时候再请求。

减少DOM操作

网页的生成过程，大致可以分成五步。

1. HTML代码转化成DOM
2. CSS代码转化成CSSOM（CSS Object Model）
3. 结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
4. 生成布局（layout），即将所有渲染树的所有节点进行平面合成
5. 将布局绘制（paint）在屏幕上

一个网页至少会渲染(render)一次，在用户的操作中，还会不断的渲染(重绘以及重构)

以下三种情况，会导致网页重新渲染。

1. 修改DOM
2. 修改样式表
3. 用户事件（比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等）

重排和重绘会不断触发，这是不可避免的。但是，它们非常耗费资源，是导致网页性能低下的根本原因。
提高网页性能，就是要降低"重排"和"重绘"的频率和成本，尽量少触发重新渲染。