图片加载是如何拖垮一个网站,为什么要有缩略图

有一次,完成了图片上传功能,上传了几张很大的图片,大概每张有10MB左右,然后刷新页面,一直在转圈圈,服务器也突然显示重新连接。

第一感觉,哦豁,网站和服务器怎么变慢了!

这个时候,我知道,实际可能会遇到的场景,我遇到了

下面重新当时的场景 

云服务器配置(宽带1Mbps)

第一步
准备好3张10MB左右的图片和index.html静态页面,部署到腾讯云windows服务器上的IIS里

访问首页,浏览器打开F12,查看图片加载响应时间

从下图可知,图片每秒加载大概50KB左右,也符合服务器带宽1Mbps

1Mbps=1024Kbps=1024/8KBps=128KB/s(理想加载状态,实际可能要打个5折,60KB/s左右)

图片加载是如何拖垮一个网站,为什么要有缩略图

第二步
同时使用多个不同浏览器打开首页,查看加载情况,从下图可知

第一个请求可以加载出来index.html页面内容

第二、三个请求完全在等待响应状态

index.html为3KB,页面文件是非常小的,影响速度应该是非常快的,也就是这个请求在服务器中处理排队状态,或者通道完全被阻塞了,只有等第一个请求不占用通道或者有空隙通道才会有内容响应回去

图片加载是如何拖垮一个网站,为什么要有缩略图

服务器立马失去连接状态,通道被完全请求占用

图片加载是如何拖垮一个网站,为什么要有缩略图

 关闭请求后,服务器立马恢复连接状态

图片加载是如何拖垮一个网站,为什么要有缩略图

第三步
将改为缩略图,50KB左右大小,几乎是1秒内响应完成,所以当一个请求完成后,再点击第二个请求,第一个请求已经响应完成,不会占用通道,自然第二个请求就很顺畅。

那么,这个时候如果我模拟高并发会如何呢?借助工具请求测试?

图片加载是如何拖垮一个网站,为什么要有缩略图

 如果第一个请求还是加载大图,那么postman快速请求1000次,第一个请求就等待响应,说明加载图片就完全阻塞带宽通道,其他请求完全进不去 ,关闭大图加载页面,此时堆积的请求开始缓存得到响应,逐步加快得到响应,其他排队的已经响应完成

通过对上面场景的认知,在技术上就知道应该使用那个方案进行图片的处理

这也就是为什么一定会有原图和对应原图的缩略图的原因,同时也会了解到什么是带宽等知识点

原创文章,作者:Zhu, Yuanyuan,如若转载,请注明出处:https://www.yidc.net/archives/18484