js 将大量图片保存在内存中会有问题吗？

[xiaoming1992]

较多的图片（预计 100 张共计 10-15M ）需要随取随用，我打算将他们保存在内存中，

const imgs: Image[] = []

不知道会不会对程序的运行有什么不好的影响？比方说卡顿啊、图片内容丢失啊之类的？能推荐这方面（我也不知道哪方面...）的科普文就更好了。

[lamada]

缓存一般没有问题，楼上说的爆内存和这个关系应该不大。移动端图片爆内存的情况是一般是图片尺寸的原因，和文件大小无关。你可以计算所有展示的图片 w*h*4 来估算一下渲染时所占用的内存。

[xiaoming1992]

@lamada 我之前用过同时显示 8 张 4096*2048 的图片，手机动不动就黑屏……现在仅仅是 3-6 张 2000*1000，这么算的话大概百来 M，应该问题不大。

[xiaoming1992]

@maichael 设备太多了，没法一一测试啊，就怕内存占用处在临界点，这台设备好用，那台设备崩了，或者由于不同设备的缓存策略不同，缓存太多，如果动不动给我自动清掉一些缓存，也很烦啊。

[weixiangzhe]

图片太大结合 oss 的图片处理用，可以压缩为 webp 的格式 再控制下长宽就会好很多

[mxT52CRuqR6o5]

没啥问题，渲染出来的图片才会影响性能

[xiaoming1992]

@weixiangzhe 大小不能压缩，还要支持放大了看也清楚，已经压缩的足够了，2000*1000 的图片现在已经 100k 不到了

[ofblyt]

display:none 的图片好像也可以用在 canvas 里面，所以其实加几个隐藏的 div 加载图片就行

[mxT52CRuqR6o5]

@mxT52CRuqR6o5 不过楼主这种增加抽象复杂度的随取随用也没啥用，随便找个预加载库就是了

[xiaoming1992]

@mxT52CRuqR6o5 不太清楚"增加抽象复杂度"是什么意思，是说我这么搞让问题更复杂了嘛？

[mxT52CRuqR6o5]

@xiaoming1992 比如常规方法是通过图片 url 现场 new Image 插入网页，哪个 Image 是哪个 url 对应关系都很清楚，你先把所有的 Image 预生成再存到一个数组里，(别人接手项目)可能就不能马上理清每个 Image 对应哪个图片

[xiaoming1992]

@mxT52CRuqR6o5 由于我这边时不时需要操作这一组有序的图片，这一组 url 将会按照一定的规律画到同一个 canvas 上，所以才将他们放在一个数组里面的。。。

[CODEWEA]

道理我都懂，可是你这个就顶多是个图片懒加载啊，你如何证明是保存到 js 了？

[mxT52CRuqR6o5]

@xiaoming1992 url 现场生成 image 再画到 canvas 上，中间的步骤可以当做黑箱不用去太关心，更符合直觉

[mxT52CRuqR6o5]

@mxT52CRuqR6o5 更符合直觉指的是我输入了一个 url，在 canvas 上就渲染了对应的图片

[xiaoming1992]

@mxT52CRuqR6o5 对，但是我必须预加载他，不能我需要了再临时加载，这是我做的一个小 demo https://m.lmoar.com/vrs/t/dist-example/example.html

@CODEWEA 对，是图片预加载，如果仅仅 new Image.src = url，那么浏览器很快就会清掉缓存，我这边将返回的 img 保存到数组里面，**或许 /应该 /可能**浏览器不会清掉缓存。

[xiaoming1992]

@xiangyuecn 回来看了一下，ctx.drawImage 好像不能接受 blob 作为参数。。。

[mxT52CRuqR6o5]

@xiaoming1992 随便找个预加载的库就是了

[sneezry]

@nvkou localStorage 只能放字符串，并且单个域名在多数浏览器里有 5M 的限制

[xiangyuecn]

@xiaoming1992 #36 URL.createObjectURL(blob)

[xiaoming1992]

@mxT52CRuqR6o5 我好像确实忘了去找库了，其实我一直纠结的是，浏览器会不会把我预加载的东西给清理掉