图片数量多的网页打开慢的原因和解决办法

网页打开慢的表现

一个页面里面引入了大量小图片，单张大小约十几KB，网站文本主体显示较快，但整个页面打开的速度很慢，浏览器F12控制台上看大多都是排队从服务器下载图片，加载图片。

通过浏览器控制台可以得到以下数据：

5.3 MB transferred 5.5 MB resources Finish: 15.74 s DOMContentLoaded: 1.87 s Load: 15.71 s

可能出现的原因及解决办法

1、服务器带宽不足

服务器带宽是否充足，在控制台上，可以查看服务器的监控面板，主要查看外网出带宽、外网入带宽，当资源紧张或达到100%时，此时网页的访问就会变得很慢

解决办法：升级带宽、接入CDN

2、服务器硬盘IO不足

这种情况通常来说并不常见，只有在高IO应用的项目中才有可能出现。普通的展示型网站不太可能出现硬盘IO瓶颈。IO资源使用情况也可以在控制台通过服务器监控面板查看。

如果普通展示型网站出现了IO长时间读写，大概率是中了木马病毒。

解决办法：查杀木马病毒、升级为SSD硬盘提高IO性能

3、服务器CPU内存占用率高

CPU或内存占用率过高，服务器无法响应请求，网页打开也会很慢。资源使用情况也可以在控制台通过服务器监控面板查看，此时要判断是否为正常访问。如果是因访问量过大引起的，则可以升级硬件。如果访问量不大而资源占用过高，或CPU长时间100%，则可能是中了木马病毒。

解决办法：查杀木马病毒、升级CPU内存规格

Linux服务器CPU占用高排查方法 https://cloud.tencent.com/developer/article/2397304

4、浏览器自身请求数限制

浏览器通常会对同一域名的并发连接数有所限制。具体来说，浏览器的并发连接数是指一个浏览器在同一时间向同一域名发起的最大并行网络连接数。每个HTTP/HTTPS请求（如加载网页、图片、脚本、样式表）都需要使用一个网络连接。浏览器会限定同一域名同一时刻能建立的最大TCP连接数量，超出此限制的请求都需要排队，直到有其他请求完成。

根据不同的浏览器和版本，这一限制可能会有所不同，但通常都在6到8个请求的范围内。例如，早期的浏览器如IE6通常限制为2个并发请求，而现代浏览器如Chrome、Firefox、Safari等通常限制为6到8个并发请求。

解决办法：接入CDN、使用http/2

CDN介绍

内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。

总结

针对较多图片等静态文件的情况，要想提高访问速度，可以接入CDN，通过CDN的各个节点，缓存加速分发，可以有效解决网页打开慢的问题，实施成本较低。