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，都会改善用户的响应时间。

　　    3）文件压缩（Accept-Encoding：g-zip）

　　　　　　图片数据最大关键是压缩图片

 　　　　　　　　1）图片的格式

　　　　　　　　 2）使用base64（转换为二进制编码）嵌入

　　　　　　　　　　　　原理：引入图片路径，通过base64转换为二进制，（定义一个函数），在其中通过转换的编码canvas绘制出一个新的图片

　　　　　　　　 3）压缩图片和使用图片Sprite技术

　　　　　　　　　　　　基本原理:
　　　　　　　　　　　　注：其实压缩图片和图片精灵是两个方面的技术，可是既然都是关于图片的优化还是放到一块吧。
　　　　　　　　　　　　现在由于工作的细分，专业的前端工程师已经少有机会去切图了，可是关于图片压缩还是得略微了解，一般图片压缩的方式有：
　　　　　　　　　　　　　　1.缩小图片分辨率；
　　　　　　　　　　　　　　2.改变图片格式；
　　　　　　　　　　　　　　3.降低图片保存质量

　　2、减少请求的次数

 　　   1）文件适当的合并

 　　   2）雪碧图

　　3、异步加载（并发,requirejs）

　　4、预加载、延后加载、按需加载

　　5、请正确理解 Repaint 和 Reflow
　　　　注：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的阻塞，又能使得页面的HTML结构能更快的释放。

　　 2、减少重绘和回流

       3、合理使用Viewport 等meta头部

       4、减少对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。

 

五）脚本执行阶段

　　1、缓存节点，尽量减少节点的查找

　　2、减少节点的操作（innerHTML）

　　3、避免无谓的循环，break、continue、return的适当使用

　　4、事件委托（请看  三） 下面的 4）

　　　　　　原理：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。（简单来说就是委托给父元素来做）