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

[xiaoming1992]

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

const imgs: Image[] = []

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

[Mutoo]

游戏引擎就是这么做的，没什么问题。

[jsq2627]

https://codepen.io/jsq2627/pen/ZEYLyEW?editors=1010

不做分片加载的话，那就有很大概率内存占用超出上限，页面崩溃。特别是低端安卓机。
如果你能手动控制好分片加载的话，那自然是 ok 的。
另外存 blob 和存 Image 有个区别是，blob 占用的是 JS heap 内存，最大上限比存 Image 小很多。

[xiaojie668329]

100 张肯定没问题，我试过存过千张几百 kb 的。

[baihaihui]

根据实现，图片不一定在内存。具体是 from disk cache 还是 from memory cahe 应该是分情况的

[xiangyuecn]

@jsq2627 #42 这段代码有意思。我试了一个 200kb 的图片（ 1800*1200 ）加载 200 次的内存占用(约 50M 流量)



任务管理器里面报的内存，不知道是 windows 的是实际的还是 chrome 的是实际的，不过应该 600M+是有的，performance 里面的值雷打不动😂

刚开始加载并渲染 和 只加载不渲染 内存占用差不多（ 50M 左右增量），然后我拖动页面让所有的图片都至少可见一次，内存立马爆炸到 600 多 M ；移除所有已显示的图片后，手动 GC 后内存正常回收。

看样子 Image 的性能优化的确实厉害，缓存了 Image 就没有必要用 Blob 了。

-------

另外还测试了一下 2M 的 Blob *200 个，内存占用出现在浏览器的主进程（ ID：8612 ）上，并不在网页窗口的进程上；测试不断创建 1M 的 ArrayBuffer 就能把 chrome 主进程的内存占光（任务管理器里面看 2.4G 左右就不动了），然后内存放不下的 blob 疯狂写入硬盘（ User Data\Default\blob_storage 目录），目测会把硬盘写满😂。测试代码（ 12G 数据，机械盘估计更明显）：
```
s=[];for(var i=0;i<12000;i++)s.push(new Blob([new Uint8Array(1*1024*1024)]));console.log("end")
```

[xiaoming1992]

@jsq2627 @baihaihui @xiangyuecn 这样说来，将图片直接用 image 缓存应该是可行的，不用做其他处理了吧。

梳理了一下自己的思路之后，发现我最初的疑问应当是，“浏览器是否会在一定的时候清理已缓存的图片”，经过初步测试，至少保存在数组中的 image 不会被清理。

[jsq2627]

@xiangyuecn #45 看来我上面说的也不太对，blob 不占用 js heap，是有专门的存储系统来处理的
https://chromium.googlesource.com/chromium/src/+/master/storage/browser/blob/README.md


@xiaoming1992 #46 应该只要注意内存量级就行。内存占用太多的话，低端设备会频繁触发 memory swapping，反而变成负优化

[KuroNekoFan]

new Image 然后设置 src 不就行了
让浏览器自己管理 cache 不好吗，hack 除了好玩到底有啥优势

[baihaihui]

@xiaoming1992 浏览器是否清除缓存取决与缓存是如何配置的。有强缓存，协商缓存。对于图片直接配置成强缓存就行。如果内存使用过高，浏览器会自动落盘（ from disk cache ）。

[muzuiget]

楼主想多了，这种情况让浏览器自己优化就好了。说不定图片不可见，浏览器自己会把图片内存交换到硬盘上去呢。

[xcstream]

直接引用地址浏览器自动缓存的。

[xiaoming1992]

@KuroNekoFan 仅仅是 new image src，浏览器很快就会清掉缓存，所以才把他们存数组里的。

[KuroNekoFan]

@xiaoming1992 浏览器缓存是被 http header 控制的，请补充相关知识……