1、什么是前端性能优化？
从用户访问资源到资源完整展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。
2、为什么要做前端性能优化？
在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利于网站访问速度的因素会产生，从而严重影响网站的性能，导致网站访问速度变慢，用户体验低下，最终导致用户流失。
3、如何进行前端性能优化
性能黄金法则：只有10%-20%的最终用户响应时间花在接收请求的HTML文档上，剩下的80%-90%时间花在HTML文档所引用的所有组件(图片，script，css，flash等等)进行的HTTP请求上。
yahoo前端性能团队总结的35条黄金定律请见：http://blog.csdn.net/zhouziyu2011/article/details/60468287
1) 内容层面
① DNS解析优化
DNS缓存、减少DNS查询次数（减少来自不同domain的请求的数量）；
② 避免重定向
重定向至少访问两个不同地址，会减慢访问速度；
③ 杜绝404
404代表服务器没有找到资源，网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，客户端还会将下载回来的内容(404)当成JavaScript去解析。
2) 网络传输阶段
① 减少传输过程中实体的大小
a. 缓存：添加Expires 或Cache-Control报文头
对一个网站而言，CSS、JavaScript、图片等静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。通过设置http头中的cache-control和expires的属性，可设定浏览器缓存，添加Expires报文头，将静态内容设为永不过期，或者很长时间后才过期；添加Cache-Control报文头，来控制网页的缓存。
b. cookie优化
去除没有必要的cookie，如果网页不需要cookie就完全禁掉。
将cookie的大小减到最小。
注意cookie设置的domain级别，没有必要时不要影响到sub-domain
设置合适的过期时间，较长的过期时间可以提高响应速度。
c. 文件压缩
Accept-Encoding：g-zip，Gzip压缩传输文件通常可以减少70%网页内容的大小，包括脚本、样式表、图片等文件。
② 减少请求的次数
a. 文件适当的合并
将多个JS脚本文件合并成一个文件，将多个CSS样式表文件合并成一个文件，以此来减少文件的下载次数。
b. 雪碧图
把小图标合成一张大图，通过给元素的公共css设置background-image为该合成图，这样每个元素都会以该合成图为背景，而且页面也只加载一张合成图，然后再给每个元素单独微调其background-position。把多个请求合并成一个。
③ 异步加载
通过async和defer关键字或动态创建<script>标签，可以让脚本异步执行。
3) 渲染阶段
① js放底部，CSS放顶部
将js脚本置底，可以让网页渲染所需要的内容尽快加载显示给用户。
浏览器在CSS全部传输完全之前不会去渲染任何的东西，将CSS放在文档顶部能使页面加载得更快。
② 减少重绘和回流
重绘和回流会延长网页的加载时间。减少重绘和回流的方法有：将多次改变样式属性的操作合并成一次操作。
③ 减少DOM节点
④ 网页中元素过多对网页的加载和脚本的执行都是沉重的负担，因此要减少DOM元素的数量。
4) 脚本执行阶段
① 减少节点的操作（innerHTML）
避免多次操作节点，构建好后再一次性添加到文档中去，而不是循环添加每一行
② 事件委托
采用事件委托机制，在父级元素上添加一个事件监听，来替代在每一个子元素上添加事件监听。
