问题
在实际开发中，需要加载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)
网友评论