点滴生活

Appearance

以下是使用 Web Worker 实现大文件分片下载的完整方案：

Web Worker 分片下载实现方案 ​

1. 架构设计 ​

2. 核心代码实现 ​

2.1 主线程代码 ​

javascript
class DownloadManager {
    constructor(url) {
        this.worker = new Worker('download.worker.js');
        this.url = url;
        this.setupListeners();
    }

    setupListeners() {
        this.worker.onmessage = (e) => {
            const { type, data } = e.data;
            switch (type) {
                case 'progress':
                    this.updateProgress(data);
                    break;
                case 'complete':
                    this.saveFile(data);
                    break;
                case 'error':
                    this.handleError(data);
                    break;
            }
        };
    }

    startDownload() {
        this.worker.postMessage({
            type: 'start',
            config: {
                url: this.url,
                chunkSize: 10 * 1024 * 1024, // 10MB/chunk
                maxConcurrent: 3
            }
        });
    }

    pauseDownload() {
        this.worker.postMessage({ type: 'pause' });
    }

    resumeDownload() {
        this.worker.postMessage({ type: 'resume' });
    }

    updateProgress({ downloaded, total }) {
        console.log(`进度: ${((downloaded / total) * 100).toFixed(1)}%`);
    }

    async saveFile(blob) {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'downloaded-file';
        a.click();
        URL.revokeObjectURL(url);
    }
}

2.2 Web Worker 代码 (download.worker.js) ​

javascript
// 初始化状态
let state = {
    chunks: new Map(),
    activeRequests: new Set(),
    controller: null,
    isPaused: false
};

// IndexedDB 配置
const DB_NAME = 'downloadDB';
const STORE_NAME = 'chunks';

// 打开数据库
const openDB = () => {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open(DB_NAME, 1);

        request.onupgradeneeded = (e) => {
            const db = e.target.result;
            if (!db.objectStoreNames.contains(STORE_NAME)) {
                db.createObjectStore(STORE_NAME, { keyPath: 'id' });
            }
        };

        request.onsuccess = (e) => resolve(e.target.result);
        request.onerror = reject;
    });
};

// 存储分片
const saveChunk = async (id, data) => {
    const db = await openDB();
    const tx = db.transaction(STORE_NAME, 'readwrite');
    tx.objectStore(STORE_NAME).put({ id, data });
    return new Promise((resolve) => (tx.oncomplete = resolve));
};

// 获取分片
const getChunk = async (id) => {
    const db = await openDB();
    const tx = db.transaction(STORE_NAME, 'readonly');
    const request = tx.objectStore(STORE_NAME).get(id);
    return new Promise((resolve) => {
        request.onsuccess = (e) => resolve(e.target.result?.data);
    });
};

// 下载逻辑
const downloader = {
    async start(config) {
        state.controller = new AbortController();

        // 获取文件元数据
        const fileSize = await this.getFileSize(config.url);
        const totalChunks = Math.ceil(fileSize / config.chunkSize);

        // 恢复进度
        const downloadedChunks = await this.checkExistingChunks(totalChunks);

        // 创建下载队列
        const queue = Array.from({ length: totalChunks }, (_, i) => i).filter((i) => !downloadedChunks.has(i));

        // 并发控制
        while (queue.length > 0 && !state.isPaused) {
            const tasks = queue.splice(0, config.maxConcurrent).map((i) => this.downloadChunk(i, config));

            await Promise.all(tasks);
        }

        // 合并文件
        if (!state.isPaused) {
            const blob = await this.mergeChunks(totalChunks);
            self.postMessage({ type: 'complete', data: blob });
        }
    },

    async getFileSize(url) {
        const response = await fetch(url, { method: 'HEAD' });
        return parseInt(response.headers.get('Content-Length'), 10);
    },

    async checkExistingChunks(total) {
        const chunks = new Set();
        for (let i = 0; i < total; i++) {
            if (await getChunk(i)) chunks.add(i);
        }
        return chunks;
    },

    async downloadChunk(index, config) {
        const start = index * config.chunkSize;
        const end = start + config.chunkSize - 1;

        try {
            const response = await fetch(config.url, {
                headers: { Range: `bytes=${start}-${end}` },
                signal: state.controller.signal
            });

            const buffer = await response.arrayBuffer();
            await saveChunk(index, buffer);

            // 更新进度
            self.postMessage({
                type: 'progress',
                data: {
                    downloaded: (index + 1) * config.chunkSize,
                    total: config.chunkSize * (await this.checkExistingChunks(total)).size
                }
            });
        } catch (error) {
            if (error.name !== 'AbortError') {
                self.postMessage({ type: 'error', data: error.message });
            }
        }
    },

    async mergeChunks(total) {
        const buffers = [];
        for (let i = 0; i < total; i++) {
            const data = await getChunk(i);
            buffers.push(new Uint8Array(data));
        }
        return new Blob(buffers);
    }
};

// Worker 消息监听
self.addEventListener('message', async (e) => {
    switch (e.data.type) {
        case 'start':
            await downloader.start(e.data.config);
            break;
        case 'pause':
            state.isPaused = true;
            state.controller?.abort();
            break;
        case 'resume':
            state.isPaused = false;
            downloader.start(e.data.config);
            break;
    }
});

3. 优化策略 ​

3.1 流式合并（内存优化） ​

javascript
async mergeChunks(total) {
  const stream = new ReadableStream({
    async start(controller) {
      for (let i = 0; i < total; i++) {
        const data = await getChunk(i);
        controller.enqueue(new Uint8Array(data));
      }
      controller.close();
    }
  });

  return new Response(stream).blob();
}

3.2 分片校验 ​

javascript
// 在下载完成后校验
const verifyChunk = async (index, config) => {
    const data = await getChunk(index);
    const hash = await crypto.subtle.digest('SHA-256', data);
    const expectedHash = await fetchHashFromServer(index);
    return hash === expectedHash;
};

3.3 断点续传增强 ​

javascript
// 持久化存储状态
const saveState = () => {
    localStorage.setItem(
        'downloadState',
        JSON.stringify({
            url: config.url,
            downloadedChunks: Array.from(downloadedChunks)
        })
    );
};

// 异常恢复
window.addEventListener('beforeunload', () => {
    if (state.activeRequests.size > 0) {
        saveState();
    }
});

4. 时序图 ​

5. 注意事项 ​

  1. 内存管理
    • 使用流式处理避免大文件内存溢出
    • 及时清理 IndexedDB 中的临时数据
  2. 错误恢复
    • 实现分片级重试机制
    • 存储最后成功分片索引
  3. 浏览器兼容性
javascript
// 检查特性支持
if (!window.Worker) {
    throw new Error('当前浏览器不支持 Web Worker');
}
if (!indexedDB) {
    throw new Error('当前浏览器不支持 IndexedDB');
}
  1. 性能监控
javascript
// 添加性能埋点
const perf = {
    startTime: 0,
    markStart() {
        this.startTime = performance.now();
    },
    getSpeed() {
        const duration = (performance.now() - this.startTime) / 1000;
        return (downloadedBytes / 1024 / 1024 / duration).toFixed(2) + 'MB/s';
    }
};

该方案通过 Web Worker 实现后台分片下载，结合 IndexedDB 存储分片数据，主线程保持流畅响应。可根据实际需求扩展以下功能：

  • 下载加速：通过多个 CDN 域名并发下载
  • 加密传输：在 Worker 中进行 AES 解密
  • 压缩传输：支持 Brotli 压缩分片
  • 跨设备续传：通过服务端同步下载状态