JS Blob存储位置及文件内容加载至RAM时机的技术咨询

问题1：文件内容何时完全加载到RAM中？ #

文件内容不会在步骤(1)-(4)的任何一步立即加载到RAM，真正的完全加载发生在步骤(4)执行后，浏览器开始读取Blob URL对应的文件内容、完成图片解码并准备渲染的阶段。

具体来说，步骤(4)只是完成了图片地址的绑定，浏览器会在资源调度的合适时机（比如图片进入视口）才会发起对Blob URL的请求，此时才会把文件内容从存储介质（本地磁盘/网络驱动器）读取到RAM，并解码为可渲染的图像数据。

问题2：前期流程、Blob本质及网络驱动器处理 #

步骤(1)-(3)的核心行为 #

• 步骤(1)：showOpenFilePicker()仅返回FileSystemFileHandle对象，这只是系统对目标文件的引用标识，不读取任何文件内容或元数据，完全不占用额外内存。
• 步骤(2)：fileHandle.getFile()返回File对象（Blob的子类），此时仅包含文件的元数据（文件名、大小、MIME类型等）和对源文件的引用，未加载任何文件内容到内存。File本质是文件的代理，而非内存数据块。
• 步骤(3)：URL.createObjectURL(file)创建临时本地URL，仅建立URL与File对象的映射，不触发任何文件IO操作，也不加载内容到RAM。

Blob的本质：仅持有引用而非内容 #

从文件系统获取的File/Blob属于文件引用型Blob：

• 它们不存储文件内容，仅保留对源文件的引用和元数据。
• 只有当主动调用arrayBuffer()、text()等读取方法，或<img>这类消费端发起数据请求时，才会触发实际的文件读取，将内容加载到RAM中。

网络驱动器文件的处理逻辑 #

对于网络驱动器上的文件：

1. 系统需通过网络协议（如SMB）与远程存储交互，读取延迟远高于本地磁盘。
2. 浏览器触发内容读取时，会通过系统API发起网络IO，将文件数据从远程服务器拉取到本地RAM，耗时取决于网络速度和文件大小。
3. 由于读取异步且延迟高，代码执行完成后（步骤4结束），文件内容尚未进入RAM，因此Chrome开发者工具Sources标签中不会立即显示对应的Blob，只有当数据完全加载到内存后，才会出现在Blob列表中。

内容的提问来源于stack exchange，提问作者LemonGraZ