您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

六步实现JavaScript大型文件并行下载?

时间:2023-03-20 14:04:08  来源:今日头条  作者:高级前端进阶

前言

相信有些小伙伴已经了解大文件上传的解决方案,在上传大文件时,为了提高上传效率,一般会使用 Blob.slice 方法对大文件按照指定的大小进行切割,然后再开启多线程进行分块上传,等所有分块都成功上传后,再通知服务端进行分块合并。

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

备注: 在某些浏览器和版本上具有供应商前缀:例如:Firefox 12 及更早版本的 blob.mozSlice() 和 Safari 中的 blob.webkitSlice(). slice() 方法的旧版本,没有供应商前缀,具有不同的语义,并且已过时。

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

 

看完上图相信对大文件下载的方案,已经有了一定的了解。接下来,我们先来介绍 HTTP Range 请求。

1.HTTP Range 请求

HTTP 协议 Range 请求允许服务器只发送 HTTP 消息的一部分到客户端。Range 请求在传送大的媒体文件,或者与文件下载的断点续传功能搭配使用时非常有用。如果在响应中存在 Accept-Ranges 首部(并且它的值不为 "none"),那么表示该服务器支持 Range 请求。

在一个 Range 首部中,可以一次性请求多个部分,服务器会以 multipart 文件的形式将其返回。如果服务器返回的是 Range 响应,需要使用 206 Partial Content 状态码。假如所请求的 Range 不合法,那么服务器会返回 416 Range Not Satisfiable 状态码,表示客户端错误。服务器允许忽略 Range 首部,从而返回整个文件,状态码用 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 请求所采用的单位,通常是字节(bytes)
  • <range-start>:一个整数,表示在特定单位下,Range 的起始值
  • <range-end>:一个整数,表示在特定单位下,Range 的结束值。这个值是可选的,如果不存在,表示此 Range 一直延伸到文档结束。

单一 Range

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

输出结果如下:

 

多重 Range

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

输出结果如下:

 

2 HTTP Range 大文件下载

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);
    // 发送HEAD请求
    xhr.send();
    xhr.onload = function () {
      resolve(~~xhr.getResponseHeader('Content-Length'));
      //   获取文件长度
    };
    xhr.onerror = reject;
  });
}

2.1.2 asyncPool 函数

asyncPool 函数用于实现异步任务的并发控制。该函数接收 3 个参数:

  • poolLimit(数字类型):表示限制的并发数
  • array(数组类型):表示任务数组;
  • iteratorFn(函数类型):表示迭代函数,用于实现对每个任务项进行处理,该函数会返回一个 Promise 对象或异步函数。
async function asyncPool(poolLimit, array, iteratorFn) {
  const ret = [];
  // 存储所有的异步任务
  const executing = [];
  // 存储正在执行的异步任务
  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) {
        // 等待较快的任务执行完成
        await Promise.race(executing);
      }
    }
  }
  return Promise.all(ret);
}

2.1.3 getBinaryContent 函数

getBinaryContent 函数用于根据传入的参数发起 Range 请求,从而下载指定 Range 内的文件数据块:

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}`);
      // 请求头上设置Range请求信息
      xhr.responseType = 'arraybuffer';
      // 设置返回的类型为arraybuffer
      xhr.onload = function () {
        resolve({
          index: i, // 文件块的索引
          buffer: xhr.response, // Range请求对应的数据
        });
      };
      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 });
  // 创建Blob
  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 仅在当前文档打开的状态下才有效。

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('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' });
  });
}

完整代码请查看文末参考文献。

3.总结

本文介绍了在 JAVAScript 中如何利用 async-pool 这个库提供的 asyncPool 函数来实现大文件的并行下载。除了介绍 asyncPool 函数之外,文章还介绍了如何通过 HEAD 请求获取文件大小、如何发起 HTTP Range 请求及在客户端如何保存文件等相关知识。其实利用 asyncPool 函数不仅可以实现大文件的并行下载,而且还可以实现大文件的并行上传,感兴趣的小伙伴可以自行尝试一下。

参考资料

https://blog.bitsrc.io/implement-concurrent-download-of-large-files-in-JavaScript-4e94202c5373

https://Github.com/eligrey/FileSaver.js

https://mp.weixin.qq.com/s/lQKTCS_QB0E62SK9oXD4LA

https://gist.github.com/semlinker/837211c039e6311e1e7629e5ee5f0a42

https://juejin.cn/post/69548688790341

https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/slice



Tags:JavaScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除。
▌相关推荐
JavaScript 運行在客戶端,多數 Browser 亦有很強的 debugger,有時為了保護程式碼的邏輯不被破解或想要藏惡意程式之類的,會想辦法讓分析者沒辦法輕易分析原始碼。通常又可以分...【详细内容】
2023-05-20  Tags: JavaScript  点击:(0)  评论:(0)  加入收藏
前言熟悉我的朋友可能会知道,我一向是不写热点的。为什么不写呢?是因为我不关注热点吗?其实也不是。有些事件我还是很关注的,也确实有不少想法和观点。但我一直奉行一个原则,就是...【详细内容】
2023-05-18  Tags: JavaScript  点击:(9)  评论:(0)  加入收藏
作为前端开发领域的初学者,您应该知道 Javascript 是创建超酷动态网站的关键。这门脚本语言可以让您向页面添加各种很酷的功能,但是有这么多功能,很容易迷失在其中。别担心, 在...【详细内容】
2023-05-12  Tags: JavaScript  点击:(26)  评论:(0)  加入收藏
最近有一位00后的小妹妹粉丝私信小编说自己很喜欢编程,目前在某公司实习前端开发工作,说到现在为止还没有搞懂JavaScript中深拷贝和浅拷贝这个问题,同时也在网上看了很多关于深...【详细内容】
2023-05-12  Tags: JavaScript  点击:(19)  评论:(0)  加入收藏
对于网络平台而言,WebAssembly 的出现无疑是意义重大的,它能让各种语言编写的代码以接近原生的速度在 Web 中运行&mdash;&mdash;那么在各种语言中,Java 会是其中最流行的吗?原文...【详细内容】
2023-05-09  Tags: JavaScript  点击:(13)  评论:(0)  加入收藏
作者 | Josh Mo译者 | 核子可乐策划 | 李冬梅如果大家已经拥有一定的 Rust Web 开发经验,应该听说过在前端 Web 开发上用 Rust(通过 WASM)还是用 Java 这个充满争议性的话题。...【详细内容】
2023-05-09  Tags: JavaScript  点击:(22)  评论:(0)  加入收藏
1 JavaScript 简介JavaScript 压缩、混淆和加密技术对于网页来说,其逻辑是依赖于JavaScript来实现的,JavaScript 有如下特点: JavaScript 代码运行于客户端,也就是它必须要在用...【详细内容】
2023-05-07  Tags: JavaScript  点击:(9)  评论:(0)  加入收藏
面试官最爱问的JavaScript数组方法和属性都在这里,下面是 JavaScript 常用的数组方法和属性介绍,以及简单的代码示例:JavaScript数组方法和属性一、数组属性:1、length:返回数组...【详细内容】
2023-04-28  Tags: JavaScript  点击:(17)  评论:(0)  加入收藏
1.检查元素是否在屏幕可见区域内我们如何获得元素的点击率?主要取决于用户点击元素的次数和元素在页面上显示的次数。我们可以很容易地获取到用户的点击次数,但是如何获取一...【详细内容】
2023-04-26  Tags: JavaScript  点击:(27)  评论:(0)  加入收藏
我们一起来了解一下如何仅使用 JavaScript 将任何 HTML 页面或表单转化为 PDF文件。使用 jspdf 库,我们可以轻松地将任何 HTML 页面或表单转换为 PDF:例如:import { jsPDF } fr...【详细内容】
2023-04-24  Tags: JavaScript  点击:(35)  评论:(0)  加入收藏
▌简易百科推荐
JavaScript 運行在客戶端,多數 Browser 亦有很強的 debugger,有時為了保護程式碼的邏輯不被破解或想要藏惡意程式之類的,會想辦法讓分析者沒辦法輕易分析原始碼。通常又可以分...【详细内容】
2023-05-20  闪念基因  今日头条  Tags:JavaScript   点击:(0)  评论:(0)  加入收藏
前言熟悉我的朋友可能会知道,我一向是不写热点的。为什么不写呢?是因为我不关注热点吗?其实也不是。有些事件我还是很关注的,也确实有不少想法和观点。但我一直奉行一个原则,就是...【详细内容】
2023-05-18    趣谈前端  Tags:Javascript   点击:(9)  评论:(0)  加入收藏
作为前端开发领域的初学者,您应该知道 Javascript 是创建超酷动态网站的关键。这门脚本语言可以让您向页面添加各种很酷的功能,但是有这么多功能,很容易迷失在其中。别担心, 在...【详细内容】
2023-05-12    web前端开发  Tags: Javascript   点击:(26)  评论:(0)  加入收藏
最近有一位00后的小妹妹粉丝私信小编说自己很喜欢编程,目前在某公司实习前端开发工作,说到现在为止还没有搞懂JavaScript中深拷贝和浅拷贝这个问题,同时也在网上看了很多关于深...【详细内容】
2023-05-12  Echa攻城狮  今日头条  Tags:JavaScript   点击:(19)  评论:(0)  加入收藏
TypeScript是一种静态类型检查的编程语言,它内置了许多基本数据类型,如字符串、数字和布尔型等。除了基本数据类型,当某种类型对于大多数代码来说都非常有用时,它们就会被添加...【详细内容】
2023-05-12    大转转FE  Tags:TypeScript   点击:(17)  评论:(0)  加入收藏
1 JavaScript 简介JavaScript 压缩、混淆和加密技术对于网页来说,其逻辑是依赖于JavaScript来实现的,JavaScript 有如下特点: JavaScript 代码运行于客户端,也就是它必须要在用...【详细内容】
2023-05-07  程序员梓羽同学  今日头条  Tags:JavaScript   点击:(9)  评论:(0)  加入收藏
基于Canvas和WebGL,我们可以快速实现各种复杂的前端动画、特效渲染,如果,自己完全原生写法,一个是工作量会比较大,另外,处理不好会引发一些奇怪的问。这里分享几个帮助开发人员更...【详细内容】
2023-05-03  自学编程之道  今日头条  Tags:JS库   点击:(30)  评论:(0)  加入收藏
面试官最爱问的JavaScript数组方法和属性都在这里,下面是 JavaScript 常用的数组方法和属性介绍,以及简单的代码示例:JavaScript数组方法和属性一、数组属性:1、length:返回数组...【详细内容】
2023-04-28  老汤前端  今日头条  Tags:JavaScript   点击:(17)  评论:(0)  加入收藏
1.检查元素是否在屏幕可见区域内我们如何获得元素的点击率?主要取决于用户点击元素的次数和元素在页面上显示的次数。我们可以很容易地获取到用户的点击次数,但是如何获取一...【详细内容】
2023-04-26    web前端开发  Tags:JavaScript   点击:(27)  评论:(0)  加入收藏
我们一起来了解一下如何仅使用 JavaScript 将任何 HTML 页面或表单转化为 PDF文件。使用 jspdf 库,我们可以轻松地将任何 HTML 页面或表单转换为 PDF:例如:import { jsPDF } fr...【详细内容】
2023-04-24  web前端开发  微信公众号  Tags:JavaScript   点击:(35)  评论:(0)  加入收藏
站内最新
站内热门
站内头条