JavaScript 中如何實現大文件並行下載？

在 JavaScript 中如何實現併發控制？這篇文章中，阿寶哥詳細分析了 async-pool 這個庫如何利用 Promise.all 和 Promise.race 函數實現異步任務的併發控制。本文阿寶哥將介紹如何利用 async-pool 這個庫提供的 asyncPool 函數來實現大文件的並行下載。javascript

相信有些小夥伴已經瞭解大文件上傳的解決方案，在上傳大文件時，爲了提升上傳的效率，咱們通常會使用 Blob.slice 方法對大文件按照指定的大小進行切割，而後在開啓多線程進行分塊上傳，等全部分塊都成功上傳後，再通知服務端進行分塊合併。java

那麼對大文件下載來講，咱們可否採用相似的思想呢？在服務端支持 Range 請求首部的條件下，咱們也是能夠實現多線程分塊下載的功能，具體以下圖所示：git

看完上圖相信你對大文件下載的方案，已經有了必定的瞭解。接下來，咱們先來介紹 HTTP 範圍請求。github

關注「全棧修仙之路」閱讀阿寶哥原創的 4 本免費電子書（累計下載 3萬+）及 11 篇 Vue 3 進階系列教程。shell

1、HTTP 範圍請求

HTTP 協議範圍請求容許服務器只發送 HTTP 消息的一部分到客戶端。範圍請求在傳送大的媒體文件，或者與文件下載的斷點續傳功能搭配使用時很是有用。若是在響應中存在 Accept-Ranges 首部（而且它的值不爲「none」），那麼表示該服務器支持範圍請求。數組

在一個 Range 首部中，能夠一次性請求多個部分，服務器會以 multipart 文件的形式將其返回。若是服務器返回的是範圍響應，須要使用 206 Partial Content 狀態碼。假如所請求的範圍不合法，那麼服務器會返回 416 Range Not Satisfiable 狀態碼，表示客戶端錯誤。服務器容許忽略 Range 首部，從而返回整個文件，狀態碼用 200 。瀏覽器

1.1 Range 語法

Range: <unit>=<range-start>-
Range: <unit>=<range-start>-<range-end>
Range: <unit>=<range-start>-<range-end>, <range-start>-<range-end>
Range: <unit>=<range-start>-<range-end>, <range-start>-<range-end>, <range-start>-<range-end>
複製代碼

unit：範圍請求所採用的單位，一般是字節（bytes）。
<range-start>：一個整數，表示在特定單位下，範圍的起始值。
<range-end>：一個整數，表示在特定單位下，範圍的結束值。這個值是可選的，若是不存在，表示此範圍一直延伸到文檔結束。

瞭解完 Range 語法以後，咱們來看一下實際的使用示例：bash

1.1.1 單一範圍

$ curl http://i.imgur.com/z4d4kWk.jpg -i -H "Range: bytes=0-1023"
複製代碼

1.1.2 多重範圍

$ curl http://www.example.com -i -H "Range: bytes=0-50, 100-150"
複製代碼

好了，HTTP 範圍請求的相關知識就先介紹到這裏，下面咱們步入正題開始介紹如何實現大文件下載。服務器

2、如何實現大文件下載

爲了讓你們可以更好地理解後面的內容，咱們先來看一下總體的流程圖：微信

瞭解完大文件下載的流程以後，咱們先來定義上述流程中涉及的一些輔助函數。

2.1 定義輔助函數

2.1.1 定義 getContentLength 函數

顧名思義 getContentLength 函數，用於獲取文件的長度。在該函數中，咱們經過發送 HEAD 請求，而後從響應頭中讀取 Content-Length 的信息，進而獲取當前 url 對應文件的內容長度。

function getContentLength(url) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open("HEAD", url);
    xhr.send();
    xhr.onload = function () {
      resolve(
        ~~xhr.getResponseHeader("Content-Length") 
      );
    };
    xhr.onerror = reject;
  });
}
複製代碼

2.1.2 定義 asyncPool 函數

在 JavaScript 中如何實現併發控制？這篇文章中，咱們介紹了 asyncPool 函數，它用於實現異步任務的併發控制。該函數接收 3 個參數：

poolLimit（數字類型）：表示限制的併發數；
array（數組類型）：表示任務數組；
iteratorFn（函數類型）：表示迭代函數，用於實現對每一個任務項進行處理，該函數會返回一個 Promise 對象或異步函數。

async function asyncPool(poolLimit, array, iteratorFn) {
  const ret = []; // 存儲全部的異步任務
  const executing = []; // 存儲正在執行的異步任務
  for (const item of array) {
    // 調用iteratorFn函數建立異步任務
    const p = Promise.resolve().then(() => iteratorFn(item, array));
    ret.push(p); // 保存新的異步任務

    // 當poolLimit值小於或等於總任務個數時，進行併發控制
    if (poolLimit <= array.length) {
      // 當任務完成後，從正在執行的任務數組中移除已完成的任務
      const e = p.then(() => executing.splice(executing.indexOf(e), 1));
      executing.push(e); // 保存正在執行的異步任務
      if (executing.length >= poolLimit) {
        await Promise.race(executing); // 等待較快的任務執行完成
      }
    }
  }
  return Promise.all(ret);
}
複製代碼

2.1.3 定義 getBinaryContent 函數

getBinaryContent 函數用於根據傳入的參數發起範圍請求，從而下載指定範圍內的文件數據塊：

function getBinaryContent(url, start, end, i) {
  return new Promise((resolve, reject) => {
    try {
      let xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
      xhr.setRequestHeader("range", `bytes=${start}-${end}`); // 請求頭上設置範圍請求信息
      xhr.responseType = "arraybuffer"; // 設置返回的類型爲arraybuffer
      xhr.onload = function () {
        resolve({
          index: i, // 文件塊的索引
          buffer: xhr.response, // 範圍請求對應的數據
        });
      };
      xhr.send();
    } catch (err) {
      reject(new Error(err));
    }
  });
}
複製代碼

須要注意的是 ArrayBuffer 對象用來表示通用的、固定長度的原始二進制數據緩衝區。咱們不能直接操做 ArrayBuffer 的內容，而是要經過類型數組對象或 DataView 對象來操做，它們會將緩衝區中的數據表示爲特定的格式，並經過這些格式來讀寫緩衝區的內容。

2.1.4 定義 concatenate 函數

因爲不能直接操做 ArrayBuffer 對象，因此咱們須要先把 ArrayBuffer 對象轉換爲 Uint8Array 對象，而後在執行合併操做。如下定義的 concatenate 函數就是爲了合併已下載的文件數據塊，具體代碼以下所示：

function concatenate(arrays) {
  if (!arrays.length) return null;
  let totalLength = arrays.reduce((acc, value) => acc + value.length, 0);
  let result = new Uint8Array(totalLength);
  let length = 0;
  for (let array of arrays) {
    result.set(array, length);
    length += array.length;
  }
  return result;
}
複製代碼

2.1.5 定義 saveAs 函數

saveAs 函數用於實現客戶端文件保存的功能，這裏只是一個簡單的實現。在實際項目中，你能夠考慮直接使用 FileSaver.js 。若是你對 FileSaver.js 的工做原理感興趣的話，能夠閱讀聊一聊 15.5K 的 FileSaver，是如何工做的？這篇文章。

function saveAs({ name, buffers, mime = "application/octet-stream" }) {
  const blob = new Blob([buffers], { type: mime });
  const blobUrl = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.download = name || Math.random();
  a.href = blobUrl;
  a.click();
  URL.revokeObjectURL(blob);
}
複製代碼

在 saveAs 函數中，咱們使用了 Blob 和 Object URL。其中 Object URL 是一種僞協議，容許 Blob 和 File 對象用做圖像，下載二進制數據連接等的 URL 源。在瀏覽器中，咱們使用 URL.createObjectURL 方法來建立 Object URL，該方法接收一個 Blob 對象，併爲其建立一個惟一的 URL，其形式爲 blob:<origin>/<uuid>，對應的示例以下：

blob:https://example.org/40a5fb5a-d56d-4a33-b4e2-0acf6a8e5f641
複製代碼

瀏覽器內部爲每一個經過 URL.createObjectURL 生成的 URL 存儲了一個 URL → Blob 映射。所以，此類 URL 較短，但能夠訪問 Blob。生成的 URL 僅在當前文檔打開的狀態下才有效。好了，Object URL 的相關內容就先介紹到這裏，若是你進一步瞭解 Blob 和 Object URL 的話，能夠閱讀你不知道的 Blob 這篇文章。

2.1.6 定義 download 函數

download 函數用於實現下載操做，它支持 3 個參數：

url（字符串類型）：預下載資源的地址；
chunkSize（數字類型）：分塊的大小，單位爲字節；
poolLimit（數字類型）：表示限制的併發數。

async function download({ url, chunkSize, poolLimit = 1 }) {
  const contentLength = await getContentLength(url);
  const chunks = typeof chunkSize === "number" ? Math.ceil(contentLength / chunkSize) : 1;
  const results = await asyncPool(
    poolLimit,
    [...new Array(chunks).keys()],
    (i) => {
      let start = i * chunkSize;
      let end = i + 1 == chunks ? contentLength - 1 : (i + 1) * chunkSize - 1;
      return getBinaryContent(url, start, end, i);
    }
  );
  const sortedBuffers = results
    .map((item) => new Uint8Array(item.buffer));
  return concatenate(sortedBuffers);
}
複製代碼

2.2 大文件下載使用示例

基於前面定義的輔助函數，咱們就能夠輕鬆地實現大文件並行下載，具體代碼以下所示：

function multiThreadedDownload() {
  const url = document.querySelector("#fileUrl").value;
  if (!url || !/https?/.test(url)) return;
  console.log("多線程下載開始: " + +new Date());
  download({
    url,
    chunkSize: 0.1 * 1024 * 1024,
    poolLimit: 6,
  }).then((buffers) => {
    console.log("多線程下載結束: " + +new Date());
    saveAs({ buffers, name: "個人壓縮包", mime: "application/zip" });
  });
}
複製代碼

因爲完整的示例代碼內容比較多，阿寶哥就不放具體的代碼了。感興趣的小夥伴，能夠訪問如下地址瀏覽示例代碼。

完整的示例代碼：gist.github.com/semlinker/8…

這裏咱們來看一下大文件下載示例的運行結果：

3、總結

本文介紹了在 JavaScript 中如何利用 async-pool 這個庫提供的 asyncPool 函數，來實現大文件的並行下載。除了介紹 asyncPool 函數以外，阿寶哥還介紹瞭如何經過 HEAD 請求獲取文件大小、如何發起 HTTP 範圍請求及在客戶端如何保存文件等相關知識。其實利用 asyncPool 函數不只能夠實現大文件的並行下載，並且還能夠實現大文件的並行上傳，感興趣的小夥伴能夠自行嘗試一下。

關注「全棧修仙之路」閱讀阿寶哥原創的 4 本免費電子書（累計下載 3萬+）及 11 篇 Vue 3 進階系列教程。想一塊兒學習 TS/Vue 3.0 的小夥伴能夠添加阿寶哥微信 —— semlinker。