关于前端性能优化

我们先来看一张图来确定一下页面性能是由哪些部分组成的

　　

　　域名解析：搜索DNS服务器并解析域名IP所花费的时间，为5.864ms

　　建立链接：客户端通过ip地址与web服务器建立链接的时间，为48.275ms

　　发送请求：客户端向web服务器端发送请求所花费的时间，为0.620ms

　　等待响应：服务器端从接受http请求到开始响应客户端内容所花费的时间，为273.078ms,这段时间包括数据查询，页面转换为html格式等

　　接收数据：服务器端的响应内容全部发送到客服端的时间，为4.55ms

初步诊断网站性能瓶颈：

　　1.首先看一下那个请求花费时间最长，看看这个请求的时间线信息，来确定是服务器端响应慢了还是网络问题

　　2.如果每个请求花费的时间都没有明显高于其他，那就检查一下是不是这个页面发送的http请求次数过多了。因为浏览器对单个域名的并发连接数有限制的，需要处理完一批请求之后，在发送另外一批请求。假如页面有100个请求，每个请求花费时间为1s,浏览器最大并发数显示为10，那么处理完所有请求花费时间为100/10*1s=10s的时间。

关于最大并发数，http1.1的标准是2，而目前主流的浏览器IE、FireFox、Chrome为了提高速度，分别是10,6,6（根据具体版本可能会有变动）

前端性能策略：

　　 一项专门研究网页性能的工程师发现，一个页面从请求到加载完成，80%的时间都花在了前端上。事实也是如此，大多数时间都花费在获取前端静态文件（html,css,js）上，所以优化网站应该从前端性能着手

高性能的Html:

　　1.避免空连接

　　　　什么是空连接？空链接指的就是img,a,script,link,iframe等的src或者href,如（href=""）,一般浏览器会把它解析为blank,但是IE还是会发送请求的。

　　2.避免标签的深层次嵌套

　　　　层次越多的节点，在初始化构建时候所占用内存越大

　　3.减小html文档大小

　　　　删除对文本无影响的换行，空格或者注释，所以大多数网站上线前都会压缩文件，就是为了减小文件大小

　　4.避免脚本阻塞加载

　　　　浏览器在解析常规script标签时候，会先等待js下载完毕，在执行后边的html代码，所以最好的建议是把script放在页面的底部

高性能的Css:

　　1.使用css压缩

　　　　css压缩其实和html类似，就是把css中的多余的空格，换行，注释等删掉，达到缩减字符的目的，如下图所示：

　　　　

　　2.抽离，拆分css,不加载所有css

　　　　抽离css就是把一些通用的css放到一个公用的文件里，而不是写到各个页面。这样其他页面用到时候就可以医用缓存了，减少了不必要的重复下载。

　　　　应用抽离原则，在很多时候我们把页面通用的CSS写到了一个文件，这样加载一次后就可以利用缓存，但这样做并不适合所有场景，以前我写CSS把一些前端插件用的CSS全写到了一个页面，但是有时候页面只会用一个Dialog、有的页面只用到了一个TreeView，但却把十多个插件的CSS都下载到了页面，这就是问题了，所以虽然把CSS写道一个文件可以减少http请求，但像刚才的这种情况是不应该这样做的，对一些所有页面都会用到的我们可以这样做，所以我们在抽离和拆分的时候可要想好了

　　3.使用css sprites

　　　　使用sprites，可以减少Http的请求次数

　　4.css放在head中

　　　　相信做web的同学都知道这条建议，但为什么CSS放在页面顶部有利于网页优化呢？浏览器渲染页面大概是这样的，当浏览器从上到下一边下载html生成DOMtree一边根据浏览器默认及现有CSS生成render tree来渲染页面，当遇到新的CSS的时候下载并结合现有CSS重新生成render tree，刚才的渲染工作就白费了，如果我们把所有CSS都放到页面顶部，这样就没有重新渲染的过程了

　　5.不要用标签名限制class规则

小结：

　　Web性能的优化，主要还得根据工具分析来查看，对症下药，应该主要影响方面进行优化。