前端性能优化-优化大量图片加载&超大图片加载(附懒加载实现方案)_前端加载超大图片(100m以上)实现秒开解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39903567/article/details/115290905

本文探讨了前端性能优化中如何处理大量图片加载和超大图片加载问题。提出将图片服务与应用服务分离、图片压缩、图片懒加载等策略，并提供了两种懒加载实现方案，同时建议使用HTTP2协议以解决连接数限制。对于图片过大的情况，建议采用预加载、缩略图展示、渐进式JPEG和服务器端尺寸压缩等方法，以提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

加载的图片太多或者太大导致页面加载完成慢的问题；图片太多导致向服务器请求的次数太多,图片太大导致每次请求的时间过长,导致用户长时间等待。

一.大量图片加载优化方案

1.将图片服务和应用服务分离(从架构师的角度思考)

对于服务器来说,图片始终是最消耗系统资源的,如果将图片服务和应用服务放在同一服务器的话,应用服务器很容易会因为图片的高I/O负载而崩溃,所以当网站存在大量的图片读写操作时,建议使用图片服务器。

浏览器在同一时间对同一域名下的资源的并发请求数目是有限制的,一般在2-6之间,超过限制数目的请求就会被阻塞.一些主流浏览器对 HTTP1.1 和 HTTP 1.0 的最大并发连接数目如图

在这里插入图片描述

2. 图片压缩方案

我们可以借助一些第三方软件来进行压缩,压缩后分辨率不变,肉眼看不失真；
我们项目中对使用的图片基本都会进行压缩再上传。

3.图片懒加载

图片懒加载,简单来说就是在页面渲染过程中,图片不会一次性全部加载,会在需要的时候加载,比如当滚动条滚动到某一个位置时触发事件加载图片。
为优化回流，可以先设置占位符

实现方案一

document.documentElement.clientHeight//获取屏幕可视区域的高度
document.documentElement.scrollTop//获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离
element.offsetTop//获取元素相对于文档顶部的高度

如果