前端大图加载速度优化

问题

在实际开发中，需要加载100M的图片到网页上，并且需要绘制到canvas中，进行拖拽缩放等操作。
但受网速影响，拿到图片都需要10秒，再加上前端js处理的时间，导致交互时间很长。

处理方案

在适当的时机提前获取图片资源，缓存到前端浏览器，这样真正使用时直接从本地拿

图片缓存方法

          let img = new Image();
          img.src = 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg';
          img.onload = () => {
            console.log('图片缓存成功');
          };

以element给的测试图片地址举例

image.png
image.png

问题1

本地项目调试时发现并不会缓存，因为响应头中Cache-Control未配置，那就麻烦一下后端老哥吧
Cache-Control相关可以点击这里：图文讲解 Cache-Control 浅显易懂

问题2

配置完后发现小图可以缓存了，但是大于50M的图片还是缓存不下，因为浏览器有缓存的限制
如何在 Windows 11/10 中更改 Microsoft Edge 缓存大小 (windows-office.net)
没有找到配置chrome比较好的教程，chrome跟Edge的操作步骤是一样的，按照这个来就行。主要就是在快捷方式的属性中增加这行代码

• 注意前面要加个空格

--disk-cache-size=2147483647

image.png

配置完后，发现大图也可以缓存了

edge设置缓存大小不生效的解决方法：
浏览器缓存大小设置-disk-cache-size - 简书 (jianshu.com)