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

[xiaoming1992]

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

const imgs: Image[] = []

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

[Foreverdxa]

没有影响，放在内存速度只会更快。你硬件到位，内存随便用，但是你应该明白内存跟 磁盘的区别吧。

[Eempty]

现在的浏览器下，一般情况下没问题的，内存基本都够用

[nvkou]

好歹放 local storage 吧

[neoblackcap]

淘宝就是将很多图片放内存的，没有问题，前提是你的程序不会爆内存

[noobma]

window.performance.memory.jsHeapSizeLimit
应该足够你用的

[Torpedo]

这种应该不是直接存在了内存里吧。
就和你页面加载了 100 张图片，js 里肯定只是对这些资源的引用。
具体你通过 html 加载图片还是 js 都是一样的

[7654]

对于现在浏览器动辄几个 G 的内存占用，这点不算什么 doge

[noobma]

@Torpedo 楼主的意思应该是直接存 blob

[royzxq]

首选考虑的应该是你需要多少时间来把这上 G 的图片加载进内存里。

[xiaoming1992]

@Foreverdxa 只是我不知道操作系统 /运行环境会不会对单个页面可用内存做限制，比方说虽然我手机内存 6G，但是手机只分配给微信 1G，微信只分配给单个 html 页面 100M，数值是随便说的，意思到位就行。

@nvkou 图片取用 /增删会很频繁，比方说 10 次 /s，这些图片说多不多，说少不少的，不太想放到 localStorage 里面，还得写兼容杂七杂八的，如果没大问题就直接放内存了，毕竟我看 three.js 也是直接保存在内存的

[belin520]

Chrome 单个 tab 有内存使用上限，不多的话，没有问题的。

[xiaoming1992]

@noobma 感谢，很有用！

@noobma 不是啊，我描述里面有，直接就是简单的 `const imgs: Image[] = []` 。。。

[zhw2590582]

15M 不是事，我存视频数据到内存都是几个 G 的。

[xiaoming1992]

@royzxq 总共 10-15M，不是单张。。。

[royzxq]

@xiaoming1992 哦抱歉抱歉没看仔细，那才这么点大一点事情没有

[xiangyuecn]

看你#10 楼说的，这么大的时间间隙，最佳还是按需实时从网络加载更好些，全部缓存到内存是否有提前优化的嫌疑？

另外猜测意图并非同时需要显示大量图片，如果真需要全部缓存到内存时，尽量不要用 Image 对象来加载图片，自己写 xhr 请求得到二进制 ArrayBuffer，最多内存占用也就比 15M 多点，按需实时从内存实例化 Image 图片对象（ onload 非常快）。直接用 Image 来进行缓存内存占用会翻个 10 几倍也是正常。

[weixiangzhe]

为什麽要保存在内存中呢，图片用 new image 加载一次回就有缓存了，之后直接用 src 就好了

[xiaoming1992]

@xiangyuecn 业务需求实际是同一时刻只有 3-7 张图片，然而需要根据鼠标动作频繁切换这几张图片的 src，再讲细一点就是比较特殊的环物展示。我还没想过直接处理 buffer，回去考虑一下，谢谢。

[xiaoming1992]

@weixiangzhe 其实本来就是利用的浏览器的缓存，或许是我描述有误

[maichael]

实测一下不就知道了。