Skip to content

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

约 930 字大约 3 分钟

性能优化

2024-06-21

网页打开慢的表现

一个页面里面引入了大量小图片,单张大小约十几 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 占用高排查方法

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

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

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

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

CDN 介绍

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

总结

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