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性能的优化,主要还得依据工具分析来查看。对症下药,应该主要影响方面进行优化。