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