您的位置：首页 > Web前端

前端性能测试详细分析（二）

2012-02-24 20:43 176 查看

接着上篇文章的思路，咱继续聊前端性能测试分析和优化。今天是第二章，一共会有三章。

上文说到了图片大小的限制，如今的个大门户都不注意图片大小的限制。可能是觉得无所谓吧，其实一张图片减少1KB，整个网站所节省的大小就很可观了。

规则4：添加Expires头

使用缓存技术可以很大程度的节省HTTP 请求的开销，对那些很长时间都不更新变化的组件增加缓存，是一个很明智的选择。这其中不仅仅是图片，包括一些JS CSS flash等。

但是使用缓存是带来一部分的开发成本，这个是需要考虑之一。

另外，对于一个经常需要更新内容的网站（例如新闻网站的图片），使用缓存技术不是一个好主意。如果想要更新这一部分的内容，那么需要开发人员付出很多努力，这也是我刚才所说的开发成本之一。

规则5：压缩组件
压缩的好处？

合理的使用压缩，可以使我们的页面大小减少70% 以上。

我们需要压缩什么？

原理上来说，我们可以压缩任何组件，用来达到我们减小页面大小的目的，但是，图片和PDF文件还是尽量不要压缩，他们已经被压缩过了，在次压缩会影响质量和浪费CPU 资源。

现在常用的压缩方式为GZIP 。

压缩的成本有什么？

服务器端会消耗额外的CPU 资源用来压缩组件，而客户端也会消耗一部分资源用来解压缩。所以要对开销和获得的效果进行评估，查看是否值得压缩。通常的经验是大与1KB的文件需要压缩。

具体的压缩设置，请自行百度。。。

规则6：将样式表放到页面头部。

本规则基本只在IE 下才有效果，但是IE 70%的市场占有率还是值得我们去优化的。。

我们都希望自己的网站是逐步展现的，包括现在很流行的观看加载技术。都是基于这个目的所开发的。先给用户展示一部分内容，完后偷偷的下载另一部分内容。

而降CSS放到页面底部，会导致我们的页面白屏。或者是样式表乱。基本无法观看。

所以建议将CSS放到头部优先加载。

此项规则也可以表述成：使用link标签将样式表放到文档的<head>里。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航