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

• 避免空连接属性

空连接指：img，link script和iframe元素的src或href属性的值为空（如：src="")。一般浏览器会将空解析为blank，付发送请求。

可是IE还是会发送请求的

• 避免节点深层次嵌套

      层级越深的节点在初始化构建时。所占用内存越多

• 缩减HTML文档大小

      删除对运行结果无影响的空行和凝视

• 避免脚本堵塞载入

浏览器在解析常规script标签时，会等待script下载完毕后。才解析运行，之后的HTML代码就仅仅能等待。所以应将脚本放在文档末尾 

<script src="example.js"></script>
 </body>

 

高性能CSS

• 使用CSS压缩

      CSS压缩并非什么高端姿态，可是非常实用，其原理非常easy，就是把我们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请求，但像刚才的这样的情况是不应该这样做的，对一些全部页面都会用到的我们能够这样做，所以我们在抽离和拆分的时候可要想好了

 

• 使用CSS sprites

      使用sprites，能够降低Http的请求次数

• CSS放在head中

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

• 不要用标签名限制class规则

小结：

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