1、什么是前端性能优化
从用户访问资源到资源完整的展示在用户面前的过程当中，经过技术手段和优化策略，缩短每一个步骤的处理时间从而提高整个资源的访问和呈现速度。
2、为何要作前端性能优
提高网站性能，提高用户体验
3、前端性能优化的原则
一、因地制宜
二、不出bug
4、从浏览器发起请求到页面能正常浏览都有哪些阶段
预处理——>DNS解析——>创建链接——>发起请求——>等待响应——>接受数据——>处理元素——>布局渲染
5、性能优化的具体方法
一）内容层面
一、DNS解析优化（DNS缓存、减小DNS查找、keep-alive、适当的主机域名）
二、避免重定向
三、切分到多个域名
四、杜绝404
二）网络传输阶段
一、减小传输过程当中实体的大小
请减小HTTP请求基本原理：当咱们请求的网页文件中有不少图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器创建链接，与释放链接，这一定会形成资源的浪费，且每一个HTTP请求都会对服务器和浏览器产生性能负担。解决方法：请看第二点。
1）缓存
2）cookie优化
由于Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，因此建议去除没必要要的Coockie，使Coockie体积尽可能小以减小对用户响应的影响；
使用Cookie跨域操做时注意在适应级别的域名上设置coockie以便使子域名不受其影响；
Cookie是有生命周期的，因此请注意设置合理的过时时间，合理地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。
3）文件压缩（Accept-Encoding：g-zip）
图片数据最大关键是压缩图片
1）图片的格式
2）使用base64（转换为二进制编码）嵌入
原理：引入图片路径，经过base64转换为二进制，（定义一个函数），在其中经过转换的编码canvas绘制出一个新的图片
3）压缩图片和使用图片Sprite技术
基本原理:
注：其实压缩图片和图片精灵是两个方面的技术，但是既然都是关于图片的优化仍是放到一块吧。
如今因为工做的细分，专业的前端工程师已经少有机会去切图了，但是关于图片压缩仍是得略微了解，通常图片压缩的方式有：
1.缩小图片分辨率；
2.改变图片格式；
3.下降图片保存质量
二、减小请求的次数
1）文件适当的合并
2）雪碧图
三、异步加载（并发,requirejs）
四、预加载、延后加载、按需加载
五、请正确理解 Repaint 和 Reflow
注：Repaint 和 Reflow 也就是重绘和重排
基本原理：
Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的状况下发生，如改变visibility、outline、背景色等等。
Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会从新计算元素的几何属性，会使渲染树中受到影响的部分失效，
浏览器会验证DOM树上的全部其它结点的visibility属性，这也是Reflow低效的缘由。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性
若是Reflow的过于频繁，CPU使用率就会噌噌的往上涨，因此前端也就有必要知道 Repaint 和 Reflow的知识。
三）渲染阶段
一、js放底部，css放顶部
基本原理：
注：这个是很基础且必须遵循的知识点，但是为了文章的完整性勉为其难加进来吧，嘿嘿。
引入外部文件好处是显而易见的，并且是项目稍稍复杂一点的时候就有必要了这样作了。
易维护、易扩展，方便管理和重复利用。
正确的方式：
JavaScript是浏览器中的霸主，为何这么说，由于在浏览器在执行JavaScript代码时，不能同时作其它事情，
即每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的仍是外链的），JavaScript代码执行完成后，
才继续渲染页面。这个也就是JavaScript的阻塞特性。
由于这个阻塞的特色，建议把JavaScript代码放到标签之前，这样既能有效的防止JavaScript的阻塞，又能使得页面的HTML结构能更快的释放。
二、减小重绘和回流
三、合理使用Viewport 等meta头部
四、减小对DOM的操做
原理：对DOM操做的代价是高昂的，这在网页应用中的一般是一个性能瓶颈
在《高性能JavaScript》中这么比喻：“把DOM当作一个岛屿，把JavaScript(ECMAScript)当作另外一个岛屿，二者之间以一座收费桥链接”。
因此每次访问DOM都会教一个过桥费，而访问的次数越多，交的费用也就越多。因此通常建议尽可能减小过桥次数。
减小对DOM元素的查询和修改，查询时可将其赋值给局部变量。
注：在IE中:hover会下降响应速度
四）数据传输类型
使用JSON格式来进行数据交换
基本原理：
JSON是一种轻量级的数据交换格式，采用彻底独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，
这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。
与XML序列化相比，JSON序列化后产生的数据通常要比XML序列化后数据体积小，因此在Facebook等知名网站中都采用了JSON做为数据交换方式。
JS操做JSON：
在JSON中，有两种结构： 对象和数组。
一个对象以 “ { ” 开始，“ } ” 结束。每一个“名称”后跟一个 “ : ” ；“名称/值 对”之间使用 “ , ”（逗号）分隔。 名称用引号括起来；值若是是字符串则必须用引号括起来，
数值型则不须要。如：
var obj={"name":"darren","age":24,"location":"beijing"}
数组是值（value）的有序集合。一个数组以 “ [ ” 开始， “ ] ” 结束。值之间使用 “ , ” （逗号）分隔。如：
var jsonlist=[{"name":"darren","age":24,"location":"beijing"},{"name":"weidong.nie","age":24,"location":"hunan"}];
对这种数组和对象字面量的操做是很是方便且高效的。若是预先知道JSON结构的状况下，使用JSON进行数据传递简直是太美妙了，
能够写出很实用美观可读性强的代码。若是你是纯粹的前台开发人员，必定会很是喜欢JSON。
五）脚本执行阶段
一、缓存节点，尽可能减小节点的查找
二、减小节点的操做（innerHTML）
三、避免无谓的循环，break、continue、return的适当使用
四、事件委托
（请看 三） 下面的 4）
原理：
事件委托就是利用事件冒泡，只指定一个事件处理程序，就能够管理某一类型的全部事件。（简单来讲就是委托给父元素来作）
