Javascript 如何加快图像加载或提高感知性能？

我有一个网站，用户可以滚动浏览特定动画场景的一系列帧。所以每一帧都是一幅图像。Atmost500图像可以构成场景。 这意味着在显示特定场景之前，我先下载atmost500图像，然后就地显示自定义的加载程序

我为减少下载时间所做的事情：-

• 使用s3 bucket和CDN边缘服务器（来自DigitalOcean）更快地获取资产
• 使用ImageKit提供的图像优化服务帮助我进行动态图像转换。因此，我有一些度量，在此基础上，我动态地请求特定宽度和高度的图像。我的前端应用程序连接到该服务，该服务从s3存储桶内部获取内容
• 同一项服务为我提供了一名服务人员，该服务人员将网络速度考虑在内，并可降低因网络速度较慢而请求的图像质量。（这有时有效，有时无效。我认为需要我更好地实施）
• 使用

  index.html

  中的

  link rel=“preconnect”

  之类的东西来减少DNS解析时间以及Imagekit服务url的后续TLS协商和握手时间（这看起来主要像是初始负载优化，但如果我错了，请纠正我）

我的实现：-

• 我没有使用标准的

  imgsrc='…'

  方式加载所有这些图像
• 我使用

  fetch

  获取图像内容并创建

  blob

  url，在atmost500blob url形成时，我将它们逐个传递给使用

  new image（）

  创建的图像，并将

  src

  设置为

  blob

  url
• 所有这些图像都存储在一个React ref中，通过在

  ref

  数组上循环，我在

  画布上逐个绘制图像。选择一个React ref，因为它可以很好地处理大量内存内容，并帮助我实现图像的平滑滚动

瓶颈-大多数浏览器实际上只能并行地从同一域获取6资产。这意味着对于一个很棒的网络连接来说，加载我的单个动画场景可能需要5-10秒，少一点10-30秒，以此类推。我仍然可以接受5-10s标记，但对于最终用户来说，如果超过这个标记，就太多了。另外，我没有选择一次加载某个图像，也没有选择稍后加载某个图像，因为用户完全有可能滚动得如此之快，以至于之后的图像到那时还没有加载，从而产生一种不连续的体验

此应用程序有哪些性能优化选项

这是现场-

以下是源代码-

注意-对同一场景的后续请求很快，因为它们是从磁盘缓存中获取的。ImageKit服务以缓存控制响应：特定的最大年龄，我认为这就是磁盘缓存工作的原因。请纠正我的错误，但我认为浏览器会不时释放磁盘空间，因此那些缓存的图像可能不会长时间保持缓存的。所以我想加速的是初始的非缓存的加载