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

作者：阿寶哥 2021-04-19 05:41:04

本文介紹了在 JavaScript 中如何利用 async-pool 這個庫提供的 asyncPool 函數，來實現大文件的并行下載。除了介紹 asyncPool 函數之外，阿寶哥還介紹了如何通過 HEAD 請求獲取文件大小、如何發起 HTTP 范圍請求及在客戶端如何保存文件等相關知識。

[[393884]]

本文轉載自微信公眾號「全棧修仙之路」，作者阿寶哥。轉載本文請聯系全棧修仙之路公眾號。

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

相信有些小伙伴已經了解大文件上傳的解決方案，在上傳大文件時，為了提高上傳的效率，我們一般會使用 Blob.slice 方法對大文件按照指定的大小進行切割，然后在開啟多線程進行分塊上傳，等所有分塊都成功上傳后，再通知服務端進行分塊合并。

那么對大文件下載來說，我們能否采用類似的思想呢?在服務端支持 Range 請求首部的條件下，我們也是可以實現多線程分塊下載的功能，具體如下圖所示：

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

一、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 語法之后，我們來看一下實際的使用示例：

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.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 。

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:/，對應的示例如下：

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" }); 
  }); 
}

由于完整的示例代碼內容比較多，阿寶哥就不放具體的代碼了。感興趣的小伙伴，可以訪問以下地址瀏覽示例代碼。

完整的示例代碼：https://gist.github.com/semlinker/837211c039e6311e1e7629e5ee5f0a42

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

三、總結

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

四、參考資源

你不知道的 Blob

MDN - ArrayBuffer

MDN - HTTP請求范圍

JavaScript 中如何實現并發控制?

責任編輯：武曉燕來源：全棧修仙之路

JavaScript 大文件下載