Web性能优化

  我们先来看一个瀑布图来确定一个页面性能问题是由哪些项造成的。chorome自带开发人员工具

 

   图中每一行表示一个http请求，每一个请求都有一条时间线，用于标识这个请求所花费的时间。如果将鼠标放到某一条时间线上，可以看到以下信息

• 域名解析：搜索DNS服务器并解析域名为IP地址所花费的事件，这里是0ms
• 建立连接：客户端通过ip地址与web服务器简历连接所花费的时间，这里是562ms
• 发送请求：客户端向web服务端发送请求所花费时间
• 等待响应：服务器从接收http请求到开始响客户端发送内容所花费事件，这里是391ms，这段事件通常包括数据库查询，页面转换为html等操作 
• 接收数据：服务器的响应内容全部发送到客户端时间，这里是94ms

初步诊断网站性能瓶颈

 

1）首先看一下哪个请求花费的时间比较长，看看这个请求的时间线信息，确定是服务器响应慢了还是网络的问题。 

2）如果每个请求所花费的时间都没有明显高于其他，那么就看一下是不是页面的Http请求总数太多了。因为浏览器对单个域名的并发连接数是有限制的，需要处理完一批请求再发送另一批请求。假设页面有100个请求，每个请求花费1s，浏览器最大并发数限制为10个，那么处理完所为请求就需要100/10*1s=10s的时间。

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

 

前端性能策略

一项专门研究就网页性能的工程师发现，一个页面从请到加载完成，80%的时间花在前端上。事实也是如此，以图一为例，整个页面完全加载完成花费12s，服务器响应事件只有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压缩并不是什么高端姿态，但是很有用，其原理很简单，就是把我们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性能的优化，主要还得根据工具分析来查看，对症下药，应该主要影响方面进行优化。