3个高频面试题拆解：从零手写可以下载视频的浏览器

看了一堆教程还是不会写项目？别慌，这往往是把“看代码”当成了“做开发”。今天咱们不聊虚的，直接上手一个可以下载视频的浏览器实战项目。这不仅是练手，更是为了吃透那些高频面试题背后的底层逻辑。很多兄弟在 Stack Overflow 上问“为什么我的下载请求被拦截了”，其实核心就卡在流处理这一环。

项目目标：不只是个下载器

咱们要做的不是一个简单的“右键另存为”，而是一个具备完整下载管理能力的浏览器内核组件。目标很明确：

拦截视频流：能识别 <video> 标签或 XHR/Fetch 请求中的 MP4/M3U8 流。
断点续传支持：利用 HTTP Range 请求头，实现大文件分片下载。
多线程合并：模拟真实浏览器内核，将分片数据在内存中重组。

这直接对应了后端高并发场景下的流式传输与内存管理，也是前端大文件处理的核心考点。

目录结构：工程化思维

别一上来就写代码，先搭骨架。一个标准的 Node.js + WebSocket 架构项目结构如下：

video-browser/
├── server/
│   ├── index.js          # 入口文件，启动 HTTP 服务
│   ├── downloader.js     # 核心下载逻辑，处理 Range 请求
│   └── merger.js         # 分片合并逻辑，Buffer 操作
├── client/
│   ├── index.html        # 前端页面，模拟浏览器环境
│   └── app.js            # 前端逻辑，发起下载请求
└── package.json

这种结构清晰分离了“网络层”（downloader）和“数据层”（merger），方便后续单元测试。很多初学者喜欢把所有逻辑堆在 index.js 里，导致后期维护噩梦。记住：模块单一职责原则，这是面试必问。

核心代码实现：逐行拆解

1. 服务端：拦截与分片请求

在 server/downloader.js 中，我们要模拟一个视频服务器，支持 Range 请求。这是实现断点续传的关键。

const http = require('http');
const fs = require('fs');
const path = require('path');// 模拟视频文件，实际项目中可以是远程 URL
const VIDEO_PATH = './assets/sample.mp4';function handleDownload(req, res) {const filePath = VIDEO_PATH;const stat = fs.statSync(filePath);const fileSize = stat.size;// 关键：解析 Range 头，实现分片let start = 0;let end = fileSize - 1;if (req.headers.range) {const parts = req.headers.range.replace(/bytes=/, "").split("-");start = parseInt(parts[0], 10);if (parts[1]) {end = parseInt(parts[1], 10);}end = Math.min(end, fileSize - 1);}// 计算分片大小const chunkSize = (end - start) + 1;// 设置响应头，告诉客户端我们支持 Rangeres.writeHead(206, {'Content-Range': `bytes ${start}-${end}/${fileSize}`,'Accept-Ranges': 'bytes','Content-Length': chunkSize,'Content-Type': 'video/mp4'});// 创建读取流，避免一次性加载大文件到内存const stream = fs.createReadStream(filePath, { start, end });stream.pipe(res);
}module.exports = { handleDownload };

逐行解析：

req.headers.range：这是 HTTP 协议的标准头，浏览器下载大文件时会自动发送。很多新手忽略这一点，导致只能一次性下载全量数据，内存直接爆炸。
res.writeHead(206, ...)：206 状态码表示 Partial Content，即部分内容。如果返回 200，客户端可能不会触发分片逻辑。
stream.pipe(res)：使用流（Stream）处理大文件是 Node.js 的精髓。绝对不要用 fs.readFileSync 读取几百兆的视频文件，那会让你的服务器瞬间卡死。

2. 服务端：分片合并器

在 server/merger.js 中，我们负责接收分片并合并。这里涉及到底层 Buffer 操作。

const fs = require('fs');
const path = require('path');class Merger {constructor(fileName, totalSize) {this.fileName = fileName;this.totalSize = totalSize;this.chunks = new Map(); // 用 Map 存储分片，Key 为分片索引this.receivedSize = 0;}// 接收一个分片addChunk(index, buffer) {this.chunks.set(index, buffer);this.receivedSize += buffer.length;// 检查是否所有分片都接收完毕if (this.chunks.size === this.totalChunks) {this.merge();}}merge() {const writeStream = fs.createWriteStream(path.join(__dirname, '../downloads', this.fileName));// 按顺序写入分片for (let i = 0; i < this.totalChunks; i++) {if (!this.chunks.has(i)) {throw new Error(`Missing chunk ${i}`);}writeStream.write(this.chunks.get(i));}writeStream.end();console.log(`File ${this.fileName} merged successfully.`);}
}module.exports = { Merger };

避坑指南：

顺序问题：HTTP 请求是无序的，分片 2 可能比分片 1 先到。所以必须用 Map 或数组暂存，等待所有分片到齐后再按顺序写入磁盘。
内存泄漏：如果分片数量巨大，Map 会占用大量内存。在生产环境中，应该先写入临时文件，再移动，而不是全部缓存在内存中。

3. 前端：模拟浏览器行为

在 client/app.js 中，我们模拟用户点击下载。

async function downloadVideo(url) {const response = await fetch(url);const contentLength = parseInt(response.headers.get('Content-Length'));// 假设我们分成 4 个块下载const chunkSize = Math.ceil(contentLength / 4);const promises = [];for (let i = 0; i < 4; i++) {const start = i * chunkSize;const end = (i + 1) * chunkSize - 1;// 发送带 Range 头的请求const res = await fetch(url, {headers: {'Range': `bytes=${start}-${end}`}});const reader = res.body.getReader();const chunks = [];while (true) {const { done, value } = await reader.read();if (done) break;chunks.push(value);}// 这里简化处理，实际应发送给后端 Mergerconsole.log(`Chunk ${i} received: ${chunks.length} buffers`);}
}