JavaScript 中什么实现大文件并行下载

时间:?2021-04-20阅览:?365标签:?文件

相信有些伴侣早就了解大文件上传的飞凌嵌入式。在上传大文件时,为了提高上传的坦克世界效率值查询,咱俩一般会使用 Blob.slice 法门对大文件照说指定的大小非农是什么意思进行切割,然后在开启多线程进行分块上传,等所有分块都成功上传后,再通知服务端进行分块合并。

那么对大文件下载来说。咱俩能否采用类似的思想汇报呢?在服务端支持 Range 请求首部的条件下,咱俩也是可以实现多线程分块下载的功能,具体如下图所示:


看完上图相信你对大文件下载的方案。早就有了一定的了解。然后,咱俩先来说明 HTTP 范围请求。


一,HTTP 范围请求

HTTP 商讨范围请求容许监视器只出殡 HTTP 谍报的有点儿到客户端。范围请求在传送大的媒体文件。可能与文件下载的断点续传功能搭配使用时与众不同新东方学雅思有用吗。如果在响应中存在 Accept-Ranges 首部(并且它的值不为 “none”),那么表示该监视器支持范围请求。

在一个 Range 首部中,可以一次性请求多个部分的近义词,监视器会以 multipart 文件的abcc形式的成语将其返回。如果监视器返回的是范围响应,要求使用 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 。如果你对  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,其abcc形式的成语为 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" });
  });
}

由于完整的言传身教代码本末比较多,阿宝哥就不放具体的代码了。感兴趣的伴侣,可以访问以下地址浏览言传身教代码。

完整的言传身教代码:https://gist.github.com/semlinker/837211c039e6311e1e7629e5ee5f0a42

这边咱俩来看一期大文件下载言传身教的运行天下彩开奖结果直播:



三,小结

本文说明了在 JavaScript 中什么采取 async-pool 本条库提供的 asyncPool 函数,来实现大文件的并行下载。而外说明 asyncPool 函数之外,阿宝哥还说明了什么通过 HEAD 请求获取文件大小非农是什么意思,什么发起 HTTP 范围请求及在客户端什么保存文件等相关知识。其实采取 asyncPool 函数不单可以实现大文件的并行下载,而且还可以实现大文件的并行上传。感兴趣的伴侣可以自行试行一期。

原文链接:https://mp.weixin.qq.com/s/E4SdYEkEzurfrnJrBu3bjA


站长推举

1.云服务推举: 境内主流cpu云投资商,各项云产品的问道,淘宝优惠券怎么设置领取。地址:阿里云腾讯云华为云

链接: http://www.pannellisolari.net/article/detial/10332

旺球体育在线工程师文件下载的方式

http 头部的 Content-Dispositionorderby多个字段,规定了返回的本末用什么abcc形式的成语展示,旺球体育在线工程师要求使用var tt abcc形式的成语访问 此路由就可以实现文件的下载

html5中采取FileReader来窃取文件

采取FileReader来窃取文件的能够来实现即时预览的作用,本条也是在html5中才有的功能,readAsText():窃取文本文件(可以使用TxT打开的文件)。返回文本字符串,默认hs编码是UTF-8

旺球体育在线工程师实现.md文件代换成.html文件

.md文件是markdown的一种标记语言。和html比较起来,主要体现在:标记符的数量。使用i5ting_toc插件,gitbook来生成

vue 查看dist文件里的结构

优于装进后的代码。提高性能。方式一:report-json。package.json文件黑色学府入以下命令,然后控制柜运行 npm run report天下彩开奖结果直播:会在dist共享文件夹管理软件里生成 report.json。里面有装进后每份文件的来源。

血丝乎拉的事实告诉你:你何以不应该在JS文件中保存随机应变信息

在JavaScript文件中存储随机应变数据。不单是一种错误的实践方式。而且还是没想到一种与众不同奇险的网络管理行为软件。长此以往大家都知道这一点。

用node.js读写文件

node.js不如二进制小说数据类型。却提供了类似字节数组的“流“数据类型,着一种数据类型在文件系统模块中频频出现;把文件本末读入加工区,并把加工区本末解读为utf8模式,(16进制也可以哦)

在nodejs中怎么返回文件情状?

在nodejs中可以使用fs模块的stat()法门来返回文件情状,如使用stats.size获取文件大小非农是什么意思,使用stats.isFile()判断能否为文件等。二把手本篇文章就来给大家说明一期,希望对大家有所协助。

采取js判断文件能否为utf-8hs编码

可以对文件本末进行抽样,对文件进行切片,这边使用 100 片。对切出的每片文件再切取事前 1kb 大小非农是什么意思的段落,以 string 方式窃取。如果 1024B 可能正好切在某个汉字hs编码的中间。导致以 string 方式窃取时出错

旺球体育在线工程师总工也要掌握的几种文件路径知识

前面在做webpack配置时候三番五次用到路径相关本末,最近在写创业网好项目的时候,有一个文件要求上传到阿里云oss的功能,同时本地监视器也要求保留一个文件回修。三番五次用到了文件路径相关本末以及Node核心API的path模块

Linux上传文件的几种方式

在使用Linux系统监视器时。咱俩经常使用命令来上传文件到远程监视器的指定地址。虽然目下有很多入时的工具,比如说XShell。WinSCP,CRT之类,但是实际中,咱俩并不是经常使用工具来上传。主要是实际处理文件时

点击更多...

本末以共享,参看,研究为目的,不存在任何商业目的。其爱情也有版权吗属原作者所有,如有侵权或违宪,请与小编联系!变化属实本人将予以删减!

Baidu