最近要想法提高网页的性能,在查看图片加载时,产生了试验的想法。一直以来都没有太去深究,还是挖掘一下的好。
很简单的试验,<img>加载两个图像,一个2.3MB,5000*5000,一个22kb,160*160。
两个全部在页面上显示限定160*160的尺寸。
<img src="images/***.png" width=160 height=160 />
实际测试结果:5000的图像加载需要383ms,而22kb只需要12ms。差距非常大。
但是这只是第一次加载的数据,在后续次数的对比,两者数据就变的完全一样。3-7ms。
原因是直接使用了浏览器的缓存图片,5000的图像在缓存里,依然也是第一次显示之后的160尺寸的缓存图片。
可见,对于网页显示图像,小尺寸的显示区域,还是没必要显示尺寸特别大的图。
使用缩略图是很有必要的。
以上。