前言

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

var blob = instanceOfBlob.slice([start [, end [, contentType]]]};

備注：在某些瀏覽器和版本上具有供應(yīng)商前綴：例如：Firefox 12 及更早版本的 blob.mozSlice() 和 Safari 中的 blob.webkitSlice(). slice() 方法的舊版本，沒有供應(yīng)商前綴，具有不同的語義，并且已過時(shí)。

那么對(duì)大文件下載來說，能否采用類似的思想呢？在服務(wù)端支持 Range 請(qǐng)求首部的條件下，也是可以實(shí)現(xiàn)多線程分塊下載的功能，具體如下圖所示：

看完上圖相信對(duì)大文件下載的方案，已經(jīng)有了一定的了解。接下來，我們先來介紹 HTTP Range 請(qǐng)求。

1.HTTP Range 請(qǐng)求

HTTP 協(xié)議 Range 請(qǐng)求允許服務(wù)器只發(fā)送 HTTP 消息的一部分到客戶端。Range 請(qǐng)求在傳送大的媒體文件，或者與文件下載的斷點(diǎn)續(xù)傳功能搭配使用時(shí)非常有用。如果在響應(yīng)中存在 Accept-Ranges 首部（并且它的值不為 "none"），那么表示該服務(wù)器支持 Range 請(qǐng)求。

在一個(gè) Range 首部中，可以一次性請(qǐng)求多個(gè)部分，服務(wù)器會(huì)以 multipart 文件的形式將其返回。如果服務(wù)器返回的是 Range 響應(yīng)，需要使用 206 Partial Content 狀態(tài)碼。假如所請(qǐng)求的 Range 不合法，那么服務(wù)器會(huì)返回 416 Range Not Satisfiable 狀態(tài)碼，表示客戶端錯(cuò)誤。服務(wù)器允許忽略 Range 首部，從而返回整個(gè)文件，狀態(tài)碼用 200 。

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：Range 請(qǐng)求所采用的單位，通常是字節(jié)（bytes）
<range-start>：一個(gè)整數(shù)，表示在特定單位下，Range 的起始值
<range-end>：一個(gè)整數(shù)，表示在特定單位下，Range 的結(jié)束值。這個(gè)值是可選的，如果不存在，表示此 Range 一直延伸到文檔結(jié)束。

單一 Range

curl https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png -i -H "Range: bytes=0-1023"

輸出結(jié)果如下：

多重 Range

curl http://www.baidu.com -i -H "Range: bytes=0-50, 100-150"

輸出結(jié)果如下：

2 HTTP Range 大文件下載

2.1 定義輔助函數(shù)

2.1.1 getContentLength 函數(shù)

顧名思義, getContentLength 函數(shù)用于獲取文件的長(zhǎng)度。在該函數(shù)中，通過發(fā)送 HEAD 請(qǐng)求，然后從響應(yīng)頭中讀取 Content-Length 的信息，進(jìn)而獲取當(dāng)前 url 對(duì)應(yīng)文件的內(nèi)容長(zhǎng)度。

function getContentLength(url) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open('HEAD', url);
    // 發(fā)送HEAD請(qǐng)求
    xhr.send();
    xhr.onload = function () {
      resolve(~~xhr.getResponseHeader('Content-Length'));
      //   獲取文件長(zhǎng)度
    };
    xhr.onerror = reject;
  });
}

2.1.2 asyncPool 函數(shù)

asyncPool 函數(shù)用于實(shí)現(xiàn)異步任務(wù)的并發(fā)控制。該函數(shù)接收 3 個(gè)參數(shù)：

poolLimit（數(shù)字類型）：表示限制的并發(fā)數(shù)
array（數(shù)組類型）：表示任務(wù)數(shù)組；
iteratorFn（函數(shù)類型）：表示迭代函數(shù)，用于實(shí)現(xiàn)對(duì)每個(gè)任務(wù)項(xiàng)進(jìn)行處理，該函數(shù)會(huì)返回一個(gè) Promise 對(duì)象或異步函數(shù)。

async function asyncPool(poolLimit, array, iteratorFn) {
  const ret = [];
  // 存儲(chǔ)所有的異步任務(wù)
  const executing = [];
  // 存儲(chǔ)正在執(zhí)行的異步任務(wù)
  for (const item of array) {
    const p = Promise.resolve().then(() => iteratorFn(item, array));
    ret.push(p);
    if (poolLimit <= array.length) {
      const e = p.then(() => executing.splice(executing.indexOf(e), 1));
      executing.push(e);
      if (executing.length >= poolLimit) {
        // 等待較快的任務(wù)執(zhí)行完成
        await Promise.race(executing);
      }
    }
  }
  return Promise.all(ret);
}

2.1.3 getBinaryContent 函數(shù)

getBinaryContent 函數(shù)用于根據(jù)傳入的參數(shù)發(fā)起 Range 請(qǐng)求，從而下載指定 Range 內(nèi)的文件數(shù)據(jù)塊：

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}`);
      // 請(qǐng)求頭上設(shè)置Range請(qǐng)求信息
      xhr.responseType = 'arraybuffer';
      // 設(shè)置返回的類型為arraybuffer
      xhr.onload = function () {
        resolve({
          index: i, // 文件塊的索引
          buffer: xhr.response, // Range請(qǐng)求對(duì)應(yīng)的數(shù)據(jù)
        });
      };
      xhr.send();
    } catch (err) {
      reject(new Error(err));
    }
  });
}

需要注意的是：ArrayBuffer 對(duì)象用來表示通用的、固定長(zhǎng)度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)。不能直接操作 ArrayBuffer 的內(nèi)容，而是要通過類型數(shù)組對(duì)象或 DataView 對(duì)象來操作，它們會(huì)將緩沖區(qū)中的數(shù)據(jù)表示為特定的格式，并通過這些格式來讀寫緩沖區(qū)的內(nèi)容。

2.1.4 concatenate 函數(shù)

由于不能直接操作 ArrayBuffer 對(duì)象，所以需要先把 ArrayBuffer 對(duì)象轉(zhuǎn)換為 Uint8Array 對(duì)象，然后在執(zhí)行合并操作。以下定義的 concatenate 函數(shù)就是為了合并已下載的文件數(shù)據(jù)塊，具體代碼如下所示：

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 函數(shù)

saveAs 函數(shù)用于實(shí)現(xiàn)客戶端文件保存的功能，這里只是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)。在實(shí)際項(xiàng)目中，可以考慮直接使用 FileSaver.js，具體使用可以閱讀文末參考文獻(xiàn)。

function saveAs({ name, buffers, mime = 'Application/octet-stream' }) {
  const blob = new Blob([buffers], { type: mime });
  // 創(chuàng)建Blob
  const blobUrl = URL.createObjectURL(blob);
  // 實(shí)例化
  const a = document.createElement('a');
  a.download = name || Math.random();
  a.href = blobUrl;
  a.click();
  URL.revokeObjectURL(blob);
}

在 saveAs 函數(shù)中，使用了 Blob 和 Object URL。其中 Object URL 是一種偽協(xié)議，允許 Blob 和 File 對(duì)象用作圖像，下載二進(jìn)制數(shù)據(jù)鏈接等的 URL 源。在瀏覽器中，使用 URL.createObjectURL 方法來創(chuàng)建 Object URL，該方法接收一個(gè) Blob 對(duì)象，并為其創(chuàng)建一個(gè)唯一的 URL，其形式為 blob:<origin>/<uuid>，對(duì)應(yīng)的示例如下：

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

瀏覽器內(nèi)部為每個(gè)通過 URL.createObjectURL 生成的 URL 存儲(chǔ)了一個(gè) URL → Blob 映射。因此，此類 URL 較短，但可以訪問 Blob。生成的 URL 僅在當(dāng)前文檔打開的狀態(tài)下才有效。

2.1.6 定義 download 函數(shù)

download 函數(shù)用于實(shí)現(xiàn)下載操作，它支持 3 個(gè)參數(shù)：

url（字符串類型）：預(yù)下載資源的地址
chunkSize（數(shù)字類型）：分塊的大小，單位為字節(jié)
poolLimit（數(shù)字類型）：表示限制的并發(fā)數(shù)

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 大文件下載使用示例

基于定義的輔助函數(shù)，就可以輕松地實(shí)現(xiàn)大文件并行下載，具體代碼如下所示：

function multiThreadedDownload() {
  const url = document.querySelector('#fileUrl').value;
  if (!url || !/https?/.test(url)) return;
  console.log('multi threaded download start: ' + +new Date());
  download({
    url,
    chunkSize: 0.1 * 1024 * 1024,
    poolLimit: 6,
  }).then((buffers) => {
    console.log('multi threaded download end: ' + +new Date());
    saveAs({ buffers, name: 'myzip', mime: 'application/zip' });
  });
}

完整代碼請(qǐng)查看文末參考文獻(xiàn)。

3.總結(jié)

本文介紹了在 JAVAScript 中如何利用 async-pool 這個(gè)庫提供的 asyncPool 函數(shù)來實(shí)現(xiàn)大文件的并行下載。除了介紹 asyncPool 函數(shù)之外，文章還介紹了如何通過 HEAD 請(qǐng)求獲取文件大小、如何發(fā)起 HTTP Range 請(qǐng)求及在客戶端如何保存文件等相關(guān)知識(shí)。其實(shí)利用 asyncPool 函數(shù)不僅可以實(shí)現(xiàn)大文件的并行下載，而且還可以實(shí)現(xiàn)大文件的并行上傳，感興趣的小伙伴可以自行嘗試一下。