如何在JavaScript中无需加载完整缓冲区随机访问Blob内容？

核心思路 #

Blob（包括File对象）原生支持slice()方法，能够直接提取文件的任意字节范围，无需加载整个文件。我们可以利用这个特性，仅读取当前渲染窗口需要的800字节，实现真正的随机访问。

具体实现步骤 #

• 保存原始File对象：不要预先加载整个文件到ArrayBuffer，直接将用户选择的File对象存入状态，后续所有读取操作都基于这个原始对象。
• 计算窗口字节范围：根据当前要渲染的窗口起始偏移量，计算出需要读取的字节区间（注意不能超出文件总大小）。
• 按需读取指定区间：使用slice()提取目标区间，再转换为ArrayBuffer，仅加载需要的800字节。
• 可选：缓存已读取的窗口：对最近访问的窗口数据进行缓存，避免重复读取同一区域，提升滚动体验。

代码示例 #

初始化文件（替换原有代码） #

const domFile = input?.files?.[0];
if (!domFile) {
    return;
}
// 直接保存原始File对象，而非预加载整个缓冲区
const file = {
    name: domFile.name,
    originalFile: domFile, // 保存原始File用于后续slice操作
    size: domFile.size
};
state.files.push(file);
state.currentFile = file;
// 初始化时读取第一个窗口（0-800字节）
await loadFileWindow(file, 0);

加载指定窗口的函数 #

// 用于取消未完成的读取请求
let abortController: AbortController | null = null;

async function loadFileWindow(file: any, startOffset: number) {
    // 如果有未完成的请求，先取消
    if (abortController) {
        abortController.abort();
    }
    abortController = new AbortController();
    
    const chunkSize = 50 * 16; // 800字节
    const endOffset = Math.min(startOffset + chunkSize, file.size);
    try {
        // 仅提取并读取需要的字节区间
        const blobSlice = file.originalFile.slice(startOffset, endOffset);
        const buffer = await blobSlice.arrayBuffer({ signal: abortController.signal });
        // 将读取到的缓冲区和当前偏移量存入状态，供渲染器使用
        state.currentWindow = {
            buffer,
            startOffset,
            endOffset
        };
    } catch (err) {
        if (err instanceof DOMException && err.name === 'AbortError') {
            // 处理请求取消的情况，无需报错
            return;
        }
        console.error('读取文件窗口失败:', err);
    } finally {
        abortController = null;
    }
}

滚动时触发窗口加载 #

当用户滚动到新的区域时，计算对应的起始偏移量，调用loadFileWindow即可：

// 示例：假设滚动到第N行，计算起始偏移
const targetLine = 1000; // 用户滚动到的行号
const startOffset = targetLine * 16; // 每行16字节
await loadFileWindow(state.currentFile, startOffset);

关键优势 #

• 无预加载等待：打开文件时仅读取第一窗口，瞬间完成UI更新，无需等待GB级文件加载。
• 真正随机访问：无论跳转到文件任何位置，都只读取对应800字节，响应速度不受文件大小影响。
• 资源占用低：不会在内存中存储整个大文件，仅保留当前窗口和缓存的少量数据。

可选优化 #

• 窗口缓存：用Map存储已读取的窗口（以起始偏移为键），再次访问时直接返回缓存数据。
• 预加载相邻窗口：在用户滚动时，提前加载当前窗口的前后相邻窗口，减少滚动时的等待感。

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