Web性能优化
我们先来看一个瀑布图来确定一个页面性能问题是由哪些项造成的。chorome自带开发者工具
图中每一行表示一个http请求，每个请求都有一条时间线。用于标识这个请求所花费的时间。假设将鼠标放到某一条时间线上。能够看到下面信息
- 域名解析：搜索DNSserver并解析域名为IP地址所花费的事件。这里是0ms
- 建立连接：client通过ip地址与webserver简历连接所花费的时间，这里是562ms
- 发送请求：client向web服务端发送请求所花费时间
- 等待响应：server从接收http请求到開始响client发送内容所花费事件。这里是391ms。这段事件通常包含数据库查询，页面转换为html等操作
- 接收数据：server的响应内容所有发送到client时间，这里是94ms
初步诊断站点性能瓶颈
1）首先看一下哪个请求花费的时间比較长，看看这个请求的时间线信息，确定是server响应慢了还是网络的问题。
2）如果每一个请求所花费的时间都没有明显高于其它，那么就看一下是不是页面的Http请求总数太多了。由于浏览器对单个域名的并发连接数是有限制的，须要处理完一批请求再发送还有一批请求。如果页面有100个请求，每一个请求花费1s，浏览器最大并发数限制为10个。那么处理完所为请求就须要100/10*1s=10s的时间。
关于最大并发数。Http1.1的标准是2。而眼下主流的浏览器IE、FireFox、Chrome为了提快速度，分别改动为10、6、6（依据详细版本号可能有所变化）。
前端性能策略
一项专门研究就网页性能的project师发现，一个页面从请到载入完毕，80%的时间花在前端上。
事实也是如此。以图一为例。整个页面全然载入完毕花费12s。server响应事件仅仅有391ms，其它事件都花费在获取页面静态文件（js，css，图片上），所以优化站点应从前端性能优化下手
高性能Html
- 避免空连接属性
可是IE还是会发送请求的
- 避免节点深层次嵌套
- 缩减HTML文档大小
- 避免脚本堵塞载入
浏览器在解析常规script标签时，会等待script下载完毕后。才解析运行，之后的HTML代码就仅仅能等待。所以应将脚本放在文档末尾
<script src="example.js"></script> </body>
高性能CSS
- 使用CSS压缩
.test{
background-color:#ffffff;
background-image:url(a.jpg);
}
经过压缩后变成这样
.test{ background-color:#fff; background-image:url(a.jpg)}- 抽离，拆分CSS，不加在全部CSS
抽离CSS是指把一些通用的CSS放到一个文件内，而不是写道各个页面，这样一次下载后。其他页面用到的时候就能够利用缓存了，降低不必要的反复下载。
应用抽离原则，在非常多时候我们把页面通用的CSS写到了一个文件，这样载入一次后就能够利用缓存，但这样做并不适合全部场景。曾经我写CSS把一些前端插件用的CSS全写到了一个页面，可是有时候页面仅仅会用一个Dialog、有的页面仅仅用到了一个TreeView，但却把十多个插件的CSS都下载到了页面，这就是问题了。所以尽管把CSS写道一个文件能够降低http请求，但像刚才的这样的情况是不应该这样做的，对一些全部页面都会用到的我们能够这样做，所以我们在抽离和拆分的时候可要想好了
使用sprites，能够降低Http的请求次数
- CSS放在head中
相信做web的同学都知道这条建议，但为什么CSS放在页面顶部有利于网页优化呢？浏览器渲染页面大概是这种，当浏览器从上到下一边下载html生成DOMtree一边依据浏览器默认及现有CSS生成render tree来渲染页面。当遇到新的CSS的时候下载并结合现有CSS又一次生成render tree，刚才的渲染工作就白费了，假设我们把全部CSS都放到页面顶部。这样就没有又一次渲染的过程了
- 不要用标签名限制class规则
小结：
Web性能的优化，主要还得依据工具分析来查看。对症下药，应该主要影响方面进行优化。
