web性能探究（四）

最新推荐文章于 2022-09-26 10:21:58 发布

ffjjnnuu

最新推荐文章于 2022-09-26 10:21:58 发布

阅读量131

点赞数

文章标签： Web 浏览器 IE JavaScript Google ViewUI

本文链接：https://blog.csdn.net/ffjjnnuu/article/details/83842450

版权

并行下载

页面中组件的数量对于最终用户的响应时间影响最大，每一个组件需要一个额外的HTTP请求，我们知道浏览器是并行的发送HTTP请求的，你可能会问，为什么HTTP请求的数量会影响响应时间，浏览器为什么不能一次性把所有需要的东西下载完呢？

需要回到HTTP1.1的协议，它建议浏览器每次下载2个组件（一个主机），HTTP的请求是一个阶梯形的，如图1所示

图1

如果一个页面的组件分布的让两个主机进行下载，那么页面的整个响应时间会快2倍，HTTP请求如图2所示，一次下载4个组件（两个主机）。

图2

将每个主机的并行下载数量设置为2是一个基本原则，在默认情况下，ie和ff都遵守这个原则，但是用户可以自己设置这个数量。IE将这个数据存放在注册表中（查看微软帮助），ff可以通过network.http.max-persistent-connections-per-server来设置。

值得一提的是在HTTP/1.0中，FF一个主机的默认并行下载数量是8个，图3显示了如果我们在HTTP/1.0下用FF下载10个图片的情况，虽然只用一个主机，但它比图2（两个主机）显示的都快。

图3

HTTP/1.0 1.1比较

大部分网页下载使用HTTP1.1协议，但是让并行下载的数量大于2个是非常吸引人的，不要指望用户去修改浏览器的设置，前端工程师工程师应该通过CNAME来将需要下载的组件分开给多个主机，最大化并行下载数量是需要一定开支的，取决于带宽和cpu的速度，太多的并行会适得其反影响性能的。

如果将浏览器的最大并行数量设置为2（单主机基于HTTP/1.1）会怎么样，下面继续讨论

如果我们使用CNAME来增加页面并行的数量会怎么样？

这里有两篇关于这个话题的文章（Ryan Breen of Gomez 和Aaron Hopkins over at Google.），我们雅虎的性能团队也做了相关的实验去检测使用多个主机CNAME产生的影响，这个实验检测一个只有20张图片的页面，这些图片在同一个服务器上面，并且被雅虎真实的页面所访问，我们的实验检测了下载页面的时间，图四所示。

图4

在我们的实验中，我非别使用的CNAME数量为：1，2，4，5和10，他们对应各自的并行下载数量为2，4，8和10，我们获取20张小图片（36p× 36px）和20个大图片（116 x 61 px）。令我们惊奇的是，当我们下载大图片的时候，4个以上CNAME的使得响应时间变得更长；当我们下载小图片的时候，2个以上的CNAME并没有对响应时间产生很大的影响，总体来说，2个CNAME是最好的。

导致响应时间变慢的一个可能的原因就是当我们增加并行下载数量的时候客户端CPU的占用情况，我们并行系在的图片数量越多，客户端的CPU占用率越高，在我的笔记本上，当并行下载数量为2的时候，CPU的占有率为25%，当并行下载数量为20的时候，CPU的占用率为40%，这些CPU数据在不同的用户机子上肯定是不同的，但是这给了我们一个考虑的因素（当我们通过增加CNAME来最大化并行下载数量时）。

这个结果仅仅适用于那些数据已经在浏览器缓存中的站点，如果时站点在缓存中的数据是空的，那么响应时间会随着CNAE的增加变的更坏，对于那些希望提高用户第一次访问的用户的体验的站点，我们建议不要增加CNAME的数量，对于那些已经有缓存的页面，提高并行下载数量会改进响应时间，具体选择哪一个应该根据实际情况而定。

我们的原则是至少是并行数量为2，但是不要使用多于4个CNAME，最主要的：减少页面中组件的数量。