查看文章 |
网页中、网页背景采用大图片还是小图片_前端优化讨论
2009-10-16 10:00
这的确有点颠覆传统的思维了。以前我们一直以为多个小图片的下载速度之和会小于一个大图片的下载速度。但是现在利用httpwatch工具的对多个页面进行分析后的结果表明事实并不是这样。 第一张图是一个大小为40528bytes的337*191px的大图片的分析结果。 第二张图是一个大小为13883bytes的280*90px的小图片的分析结果。 ![]() 一个大小为40528bytes的337*191px的大图片的分析结果(点击图片可以查看完整大图片) ![]() 一个大小为13883bytes的280*90px的小图片的分析结果(点击图片可以查看完整大图片) Blocked:13.034s Send:0.001s Wait:0.163s Receive:4.596s TTFB:0.164s NetWork:4.760s 功耗时:17.795s 真正用于传输大文件花费的时间为Reveive时间,即4.596s,多数的时间是用来检索缓存和确定链接是否有效的Blocked时间,供花费13.034s,占总时间的73.2%。 第二张小图片花费时间为: Blocked:16.274s Send:小于0.001s Wait:0.117s Receive:0.397s TTFB:0.118s NetWork:0.516s 功耗时:16.790s 真正用于传输文件的花费时间是Reveive时间,即0.397s,这的确要比刚才大文件的4.596s小很多。但是他的Blocked时间为16.274s,占总时间的97%。 如果这些数据还不够说服你的话,让我们看看下面这张图。这里列出了某个网页中所有图片中的花费时间示意图。当然,里面的图片有大有小,规格不一。 ![]() 大约80%以上的时间是用来检索缓存和确定链接是否有效的Blocked时间。
但是,请注意:也不能用太大的单张图片,因为那样会影响到用户体验。例如个几兆的背景图片的使用绝对不是一个好主意。 |
最近读者:


