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

Yahoo 提出了前端的重要性。。。

金法则：只有10%-20% 的最终用户响应时间花在了下载HTML文档上，其余的80%-90%的时间都花在了下载页面中的组件上。。。。

当我们无数次的使用各种测试工具测试后端的性能时，不论是loadrunner或者别的什么工具，为了提高一点点用户响应时间而大动干戈的时候，也许，改动前端JS的一个执行顺序，就可以答到目的。下面的文章，介绍了如何用很简单的方法，让你的网站的展现时间减少20%.

1.减少HTTP请求

  图片地图技术。容许你在一张图片上指定多个URL的链接，他们中间是用坐标来加以区分。

  举个例子：

  以上图片你可以使用一个HTTP 请求把整个图片下载下来，完后使用图片地图技术，分别完成点击的操作，也可以用8个HTTP分别下载图片。虽然完成的功能都是一样的，但是，很明显使用网站地图节省了7个HTTP的开销。响应时间得到降低。

   css Sprites

 该技术和上边的基本是同一个原理，将很多需要使用的图片合并成一张背景图。使用坐标来控制图片的显示区域。这样只需要一次HTTP 请求，请下载完成了所有的图片的下载，大大的节省的效率。

  合并CSS 和JS 脚本

 基本原理也是一样的，最优化的情况，一个页面的CSS文件数量就为1个，JS 脚本的数量不超过3个。当然，很少有网站可以做到，包括YAHOO，但是尽量减少CSS和JS 文件的个数，是提高前端性能很好的方法。

2.使用内容发布网络 （CDN）

 CDN 是什么，请自行查阅资料。将你的静态内容尽量的放在CDN 上，是提高响应时间最直接有效的办法，虽然，它在修改和操作上会有一些麻烦，但是付出的结果是很乐观的。

3.图片大小的控制

这点我想大家都明白了，在有限的带宽中，减少你的页面的大小，可以直接降低你的网站的响应时间。这里边说几个标准。网站使用的图片，大图不超过50KB 小图不超过10KB。 另外，将所有图片的格式修改成PNG8格式，有助于降低图片的大小，在美工作图的时候，稍微注意一下，就会给你的网站减肥10%，这是多么美妙的事。

今天先写到这里，本文会分3章 详细介绍前端优化技术。。。

转载于:https://www.cnblogs.com/cauatmn/archive/2012/02/23/2365475.html