React无分页场景下高效渲染对象数组及图片加载优化咨询

首先确认三个常见的错误实现：

1. 直接使用接口返回的原始大图地址加载：接口返回的默认下载地址为原始分辨率大图，单文件体积通常在数MB级别，30张同时加载自然会耗时很长
2. 未配置图片缓存规则：如果没有给图片资源配置强缓存，浏览器每次重载页面都会重新发起全量图片请求，不会复用本地已加载过的资源
3. 组件渲染逻辑冗余：如果列表渲染时未使用唯一值作为key、或未做组件渲染拦截，会导致图片组件重复渲染，触发重复的图片加载请求

• 指定尺寸拉取图片：不要直接用接口返回的原始大图地址，通过返回的图片ID构造对应尺寸的请求地址，拉取刚好匹配展示大小的图片，单文件体积可以降到原始大图的1/10甚至更低
• 配置图片缓存：在部署服务端配置图片类资源的缓存规则，设置Cache-Control: public, max-age=2592000（30天强缓存），页面重载时浏览器会直接读取本地缓存，不需要重复发起网络请求
• 优化组件渲染：列表遍历渲染时用图片唯一ID作为key，给图片组件包裹React.memo做渲染拦截，只有当图片地址变化时才重新渲染组件，避免不必要的DOM操作
• 低质量占位图优化：先加载10px宽的低分辨率模糊图作为占位，等目标尺寸图片加载完成后再替换，用户感知上的加载速度会有明显提升

如果图片数量上升到100张，在之前的优化基础上新增以下方案：

• 虚拟滚动：只渲染当前视口范围内的图片节点，视口外的节点用占位高度代替，滚动到对应位置时再渲染对应图片，哪怕数千张图片也不会有卡顿问题，可直接使用成熟的第三方库实现
• 原生懒加载：给所有img标签添加loading="lazy"属性，浏览器会自动在图片即将进入视口时才发起加载请求，不需要额外编写逻辑，主流浏览器兼容性已经超过95%
• 并发请求控制：浏览器对同域名的并发请求数限制为6~8个，同时发起100个请求会导致后续请求排队阻塞，可通过请求队列控制同时加载的图片数量，最多同时加载6张，完成一批再加载下一批，避免请求阻塞
• 图片格式优化：生产环境可将图片转成webp/avif等高压缩比格式，比传统jpg/png体积小30%~50%，加载速度大幅提升

内容的提问来源于stack exchange，提问作者Mohit Chauhan