Web前端性能优化教程

web前端性能优化

在(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。

一个正常http请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个url指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。

而当我们请求的网页文件中有很多图片、css、js甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个http请求都会对服务器和浏览器产生性能负担。

网速相同的条件下，下载一个100kb的图片比下载两个50kb的图片要快。所以，请减少http请求。

解决办法：
合并图片（css sprites），合并css和js文件；图片较多的页面也可以使用 lazyload （懒加载）等技术进行优化。

2.尽量减少repaint 和 reflow（重绘和重排）

repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。

reflow(重排)就是dom的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证dom树上的所有其它结点的visibility属性，这也是reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果reflow的过于频繁，cpu使用率就会噌噌的往上涨，所以前端也就有必要知道 repaint 和 reflow的知识。

减少性能影响的办法：

上面提到通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式； 有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。

总之，因为 reflow 有时确实不可避免，所以只能尽可能限制reflow的影响范围。

3.减少对dom的操作
对dom操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。
解决办法：
修改和访问dom元素会造成页面的repaint和reflow，循环对dom操作更是罪恶的行为。所以请合理的使用javascript变量储存内容，考虑大量dom元素中循环的性能开销，在循环结束时一次性写入。

减少对dom元素的查询和修改，查询时可将其赋值给局部变量。
注：在ie中:hover会降低响应速度。

4、使用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。

5、高效使用html标签和css样式
基本原理：
html是一门用来描述网页的一种语言，它使用标记标签来描述网页，作为一名合格的，你有必要去知道其常用标签代表的含义(seo)和属性(表现形式)。

css指层叠样式表 (cascading style sheets)，如果说把页面想象成一个人，html就是人的骨架，css就是人的衣装，一个人的品味从他的衣装就能一目了然。

一名专业的前端开发也是一名优秀的重构，因为在页面中经常会有各种不合理的嵌套和重复定义的css样式，我不是要你重构页面，只是希望你在碰到这种情况的时候解决这些问题。如这样的css:

body .box .border ul li p strong span{color:#000}

这样的html:

1asdfghk
2sd
3zxc
4zxc

以上都是对html和css非常糟糕的使用方法。
正确理解：

html是一门标记语言，使用合理的html标签前你必须了解其属性，比如flow elements，metadata elements ，phrasing elements。比较基础的就是得知道块级元素和内联元素、盒模型、seo方面的知识。

css是用来渲染页面的，也是存在渲染效率的问题。css选择符是从右向左进行匹配的，这里对css选择符按照开销从小到大的顺序梳理一下：

id选择符 #box

类选择符 .box

标签 p

伪类和伪元素 a:hover

当页面被触发引起回流（reflow）的时候，低效的选择符依然会引发更高的开销，所以请避免低效。

6、使用cdn加速（内容分发网络）
cdn的全称是content delivery network，即内容分发网络。其基本思路是尽可能的避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输更快、更稳定。通过在网络各处放置节点服务器所构成的现有互联网基础之上的一层虚拟网络，cdn能够实时的根据网络流量和各节点的连接，负载状况以及用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的就是使用户能够就近的获取请求数据，解决网络访问拥挤状况，提高用户访问系统的响应时间。

cdn的本质仍然是一个缓存，而且将数据缓存在里用户最近的地方，使用户以最快的速度获取数据，即网络访问第一跳。

由于cdn是部署在网络运营商的机房，这些运营商又是终端用户网络的提供商，因此用户请求的第一跳就到达cdn服务器，当cdn服务器中缓存有用户请求的数据时，就可以从cdn直接返回给客户端浏览器，最短路径的返回响应，加快用户的访问速度，减少数据中心的负载压力。

cdn能够缓存一般的css，js图片等静态资源文件，而且这些文件的访问频率很高，将其缓存在cdn可以极大的提高网站的访问速度。

但是由于cdn是部署在网络运营商的机房，所以在一般的网站中都很少用cdn加速。

7、精简css和js文件
就是css和javascript的压缩，直接减少下载的文件体积。我个人经常使用的方式是使用 yui compressor，它的特点是：移除注释；移除额外的空格；细微优化；标识符替换。

8、压缩图片和使用图片sprite技术

现在由于工作的细分，专业的前端工程师已经少有机会去切图了，可是关于图片压缩还是得略微了解，一般图片压缩的方式有：

1.缩小图片分辨率；

2.改变图片格式；

3.降低图片保存质量。

关于图片精灵(sprite)技术就和我们工作直接相关，不管是在css中的图片还是在html结构中的图片都会产生http请求，前端优化的第一条就是减少请求数，最直接有效的方法是使用图片精灵（css sprite）。图片精灵就是把许多图片放到一张大图片里面，通过css来显示图片的一部分。


9、注意控制cookie大小和污染

因为cookie是本地的磁盘文件，每次浏览器都会去读取相应的cookie，所以建议去除不必要的coockie，使coockie体积尽量小以减少对用户响应的影响；
使用cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响；
cookie是有生命周期的，所以请注意设置合理的过期时间，合理地expire时间和不要过早去清除coockie，都会改善用户的响应时间。