js blob 存储在哪里

Question

我想了解在需要的时间点文件 blob 的内容实际上被读入 RAM。

我将使用以下场景，其中用户只需从磁盘中选择本地图像。随后将显示图像。

const [fileHandle] = await showOpenFilePicker();  // (1)
const file = await fileHandle.getFile();        // (2)
const imgUrl = URL.createObjectURL(file)        // (3)
document.getElementById("img").src = imgUrl;  // (4)

1. 文件内容在哪一步（1-4）才真正完全加载到 RAM 中？
2. 在此之前它是如何工作的？ blob 是否仅保存对文件的引用，但未完全加载它？这如何处理网络驱动器上的文件？

我问的原因是我的具体用例这里。当对来自慢速网络驱动器的大量图像执行上述步骤时，我观察到，在上述代码完成运行后，该 blob 似乎不在 RAM 中（图像需要一段时间才能显示，并且在Chrome 开发者工具中的“源”选项卡）。

真的很想了解那里到底发生了什么 - 谢谢大家！

Answer 1

这不是一个明确的答案，但我测试了它并且......

URL.createObjectURL(file)

无法加载图像，至少在 chrome 中无法加载

说明：

1. 首先，我使用以下代码创建了 URL：

const [fileHandle] = await showOpenFilePicker();
const file = await fileHandle.getFile();
const imgUrl = URL.createObjectURL(file)

2. 运行代码并选择一个文件
3. 从硬盘删除文件
4. 使用以下方式加载图像：

document.getElementById("img").src = imgUrl;

5. 图像未加载，我收到

   net::ERR_FILE_NOT_FOUND

   错误

当我跳过第三点时，图像按预期加载

看起来

URL.createObjectURL(file)

将文件的路径保存在硬盘上。或者至少看起来像这样