如何使用JavaScript分块读取本地大文件并逐块处理？

嘿，我完全懂你的痛点——直接用FileReader读取大文件会把整个文件塞进内存，Chrome肯定会卡爆。其实JavaScript里也有类似Java那种分块读取的方案，核心是用File.slice()把文件切成小块，再逐块异步读取，这样内存占用就可控了。

解决方案代码 #

替换你原来的脚本部分，下面是完整的可运行代码，我已经帮你适配了Chrome，支持任意类型文件，分块大小可以自己调整：

<html>
<head>
    <title>Read Large File by Chunks</title>
</head>
<body>
    <input type="file" id="myFile">
    <hr>
    <textarea style="width:500px;height: 400px" id="output"></textarea>
    <script>
        const input = document.getElementById("myFile");
        const output = document.getElementById("output");
        // 设置分块大小，这里是2KB，你可以改成更大的比如64*1024（64KB）
        const CHUNK_SIZE = 2 * 1024;

        input.addEventListener("change", function () {
            if (!this.files || !this.files[0]) return;
            
            const file = this.files[0];
            let start = 0;

            // 定义逐块读取的函数
            function readNextChunk() {
                // 切割文件：从start位置开始，取CHUNK_SIZE大小的块
                const chunk = file.slice(start, start + CHUNK_SIZE);
                const reader = new FileReader();

                reader.onload = function(e) {
                    // 把块转成字符串（和你原来的readAsBinaryString效果一致）
                    const chunkStr = e.target.result;
                    // 这里写你对每个块的处理逻辑，比如追加到textarea
                    output.textContent += chunkStr;

                    start += CHUNK_SIZE;
                    // 如果还没读完，继续读下一块
                    if (start < file.size) {
                        readNextChunk();
                    } else {
                        console.log("文件读取完成！");
                    }
                };

                reader.onerror = function() {
                    console.error("读取块失败");
                };

                // 用readAsBinaryString读取块，和你原来的方式一致
                reader.readAsBinaryString(chunk);
            }

            // 开始读取第一块
            readNextChunk();
        });
    </script>
</body>
</html>

关键知识点解释 #

1. File.slice(start, end)：这就像Java里的缓冲区，把大文件切成一个个小片段，每次只读取其中一段，不会加载整个文件到内存。
2. 异步逐块读取：读完一块（reader.onload触发）再读取下一块，避免一次性创建大量FileReader导致内存暴涨，这也是解决卡顿的核心。
3. 兼容Chrome：这个方案用的是标准的File API，Chrome完全支持，不需要任何专属API（比如你提到的Firefox的UniversalXPConnect）。

针对你提到的StackOverflow方案的补充 #

• 方案1是Firefox专属的老API，确实不用考虑；
• 方案2、3都是读取整个文本文件，没有分块逻辑，所以处理大文件会卡顿，我们的代码正好补上了分块的部分，同时保留了简洁性。

可选优化 #

如果你觉得2KB太小，可以把CHUNK_SIZE调大（比如64KB甚至1MB），这样读取速度会更快，内存占用也依然可控——就像Java里把缓冲区调大一样。

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