前端 JavaScript 中快速发起多个下载请求时,解决浏览器的并发下载连接限制

为什么会漏掉链接?

当你在前端 JavaScript 中快速发起多个下载请求时,浏览器可能无法同时处理所有请求,导致一些请求被忽略。这通常与浏览器的并发连接限制有关,例如 Chrome 可能限制每秒下载 10 个文件。

如何避免漏掉链接?
  • 引入延迟: 你可以在每次下载请求之间添加约 333 毫秒的延迟,确保请求逐个处理。
  • 使用 JSZip: 另一种方法是使用 JSZip 库将所有文件打包成一个压缩文件,然后下载这个压缩文件,这样只需发起一个下载请求,减少漏掉的风险。
代码示例

延迟方法:

const urls = [...]; // 文件 URL 数组
const delay = 333; // 约 1/3 秒延迟for (let i = 0; i < urls.length; i++) {const a = document.createElement('a');a.href = urls[i];a.download = true; // 或指定文件名a.style.display = 'none';document.body.appendChild(a);setTimeout(() => {a.click();document.body.removeChild(a);}, i * delay);
}

JSZip 方法:
首先引入 JSZip 库:

<script src="https://cdn.skypack.dev/jszip@3.10.1"></script>

然后使用以下代码:

const urls = [...]; // 文件 URL 数组
const zip = new JSZip();async function batchDownload() {for (let url of urls) {const response = await fetch(url);const blob = await response.blob();const filename = url.split('/').pop();zip.file(filename, blob);}const content = await zip.generateAsync({ type: 'blob' });saveAs(content, 'downloads.zip');
}batchDownload();
意外的细节

Firefox 在处理批量下载时可能表现不同,延迟方法可能无效(具体没有尝试),建议使用 JSZip 来确保所有文件都被包含。


详细讲解

问题背景

用户报告在批量下载时,总是会漏掉后面的几个下载链接。这表明在快速发起多个下载请求时,浏览器可能无法处理所有请求,导致一些链接被忽略。可能的原因为浏览器对并发 HTTP 连接的限制,例如 Chrome 可能限制每秒下载 10 个文件(Chrome/Chromium limits the number of download to a maximum of 10 per second)。此外,不同浏览器(如 Firefox)可能有不同的行为,增加了复杂性。

解决方案分析

为了解决这个问题,我们考虑了两种主要方法:引入延迟和使用 JSZip 创建压缩文件。

方法 1:引入延迟

通过在每次下载请求之间添加延迟,可以逐个处理请求,避免浏览器因并发限制而忽略某些请求。研究表明,约 333 毫秒的延迟(约 1/3 秒)在 Chrome 和 Opera 中有效(Stack Overflow: How in JS to download more than 10 files in browser including Firefox)。

  • 实现方式: 使用 setTimeout 在循环中为每个下载请求添加延迟。例如:
    const urls = [...]; // 文件 URL 数组
    const delay = 333; // 约 1/3 秒延迟for (let i = 0; i < urls.length; i++) {const a = document.createElement('a');a.href = urls[i];a.download = true; // 或指定文件名a.style.display = 'none';document.body.appendChild(a);setTimeout(() => {a.click();document.body.removeChild(a);}, i * delay);
    }
    
  • 优点: 简单直接,适用于大多数浏览器,特别是在 Chrome 和 Opera 中。
  • 局限性: 在 Firefox 中可能无效,具体表现因浏览器版本和配置而异。
方法 2:使用 JSZip 创建压缩文件

另一种方法是使用 JSZip 库将所有文件打包成一个压缩文件,然后下载这个压缩文件。这样只需发起一个下载请求,彻底避免了并发请求的问题。JSZip 是一个 JavaScript 库,允许在浏览器中创建、读取和编辑 .zip 文件(JSZip Documentation)。

  • 实现方式:
    首先引入 JSZip 库:
    <script src="https://cdn.skypack.dev/jszip@3.10.1"></script>
    
    然后使用以下代码:
    const urls = [...]; // 文件 URL 数组
    const zip = new JSZip();async function batchDownload() {for (let url of urls) {const response = await fetch(url);const blob = await response.blob();const filename = url.split('/').pop();zip.file(filename, blob);}const content = await zip.generateAsync({ type: 'blob' });saveAs(content, 'downloads.zip');
    }batchDownload();
    
  • 优点: 提供跨浏览器一致性,特别是在 Firefox 中表现更好(Stack Overflow: How in JS to download more than 10 files in browser including Firefox)。用户只需下载一个文件,体验更佳。
  • 局限性: 需要先通过 AJAX 加载所有文件,可能对大文件造成内存压力,且需要确保文件可通过 AJAX 访问(同域或配置 CORS)。
浏览器差异与注意事项
  • Chrome 和 Opera: 通常限制每秒 10 个下载,延迟方法有效(Chrome/Chromium limits the number of download to a maximum of 10 per second)。
  • Firefox: 延迟方法可能无效,建议使用 JSZip。Firefox 对 File System API 的支持有限,可能影响大文件下载(MEGA Help Centre: What are the file size limitations when downloading using my browser?)。
  • 并发连接限制: 浏览器对每个域的并发连接数有限制,通常为 4-6 个(Stack Overflow: max number of concurrent file downloads in a browser?),这可能导致快速发起的请求被队列化或忽略。
性能与用户体验考虑
  • 延迟方法: 适合文件数量不多且用户愿意等待的情况。延迟过长可能影响用户体验,建议从 333 毫秒开始测试。
  • JSZip 方法: 适合文件数量多或跨浏览器兼容性要求高的场景。但对于大文件,内存使用可能成为瓶颈,需注意浏览器内存限制(Stack Overflow: Is there any limit to filesize while downloading through browser over http)。
对比表
方法适用场景优点局限性
引入延迟Chrome、Opera,文件数量少简单直接,易于实现Firefox 可能无效,延迟可能影响体验
使用 JSZip跨浏览器,文件数量多单一下载请求,体验更好需要 AJAX 访问,内存占用可能高
结论与建议

引入延迟是解决批量下载漏掉链接的直接方法,建议从 333 毫秒开始测试,适用于 Chrome 和 Opera。对于 Firefox 或需要更高可靠性的场景,推荐使用 JSZip 创建压缩文件,确保所有文件被包含。用户应根据文件大小、数量和浏览器环境选择合适的方法。

关键引用
  • Chrome/Chromium limits the number of download to a maximum of 10 per second
  • [Stack Overflow: How can I let a user download multiple files when a button is clicked?](https://stackoverflow.com/questions/18451856/how-can-i-let-a-user-download-multiple-files when-a-button-is-clicked)
  • Stack Overflow: How in JS to download more than 10 files in browser including Firefox
  • JSZip Documentation
  • MEGA Help Centre: What are the file size limitations when downloading using my browser?
  • Stack Overflow: max number of concurrent file downloads in a browser?
  • Stack Overflow: Is there any limit to filesize while downloading through browser over http

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/73247.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何修改桌面图标——文件夹图标(Windows 10)

修改文件夹图标 EX&#xff1a;新建文件夹&#xff0c;程序创建文件夹等 修改桌面文件夹图标&#xff0c;打开右键菜单功能项&#xff0c;点击“属性” 在属性窗口页面找到并单击自定义&#xff0c;然后点击“更改图标” 从列表中选择喜欢的图标&#xff0c;或点击浏览选择个…

LiveCommunicationKit OC 实现

一、实现效果: ‌ LiveCommunicationKit‌是苹果公司在iOS 17.4、watchOS 10.4和visionOS 1.1中引入的一个新框架,旨在优化VoIP通话的交互体验。该框架提供了与

基于Bert模型的增量微调3-使用csv文件训练

我们使用weibo评价数据&#xff0c;8分类的csv格式数据集。 一、创建数据集合 使用csv格式的数据作为数据集。 1、创建MydataCSV.py from torch.utils.data import Dataset from datasets import load_datasetclass MyDataset(Dataset):#初始化数据集def __init__(self, s…

flowable新增或修改单个任务的历史变量

简介 场景&#xff1a;对历史任务进行关注&#xff0c;所以需要修改流程历史任务的本地变量 方法包含2个类 1&#xff09;核心方法&#xff0c;flowable command类&#xff1a;HistoricTaskSingleVariableUpdateCmd 2&#xff09;执行command类&#xff1a;BpmProcessCommandS…

Netty基础—4.NIO的使用简介一

大纲 1.Buffer缓冲区 2.Channel通道 3.BIO编程 4.伪异步IO编程 5.改造程序以支持长连接 6.NIO三大核心组件 7.NIO服务端的创建流程 8.NIO客户端的创建流程 9.NIO优点总结 10.NIO问题总结 1.Buffer缓冲区 (1)Buffer缓冲区的作用 (2)Buffer缓冲区的4个核心概念 (3)使…

python元组(被捆绑的列表)

元组&#xff08;tuple&#xff09; 1.元组一旦形成就不可更改,元组所指向的内存单元中内容不变 定义&#xff1a;定义元组使用小括号&#xff0c;并且使用逗号进行隔开&#xff0c;数据可以是不同的数据类型 定义元组自变量&#xff08;元素&#xff0c;元素&#xff0c;元素…

输入:0.5元/百万tokens(缓存命中)或2元(未命中) 输出:8元/百万tokens

这句话描述了一种 定价模型&#xff0c;通常用于云计算、API 服务或数据处理服务中&#xff0c;根据资源使用情况&#xff08;如缓存命中与否&#xff09;来收费。以下是对这句话的详细解释&#xff1a; 1. 关键术语解释 Tokens&#xff1a;在自然语言处理&#xff08;NLP&…

计算机视觉算法实战——驾驶员玩手机检测(主页有源码)

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​ ​​​ 1. 领域简介&#xff1a;玩手机检测的重要性与技术挑战 驾驶员玩手机检测是智能交通安全领域的核心课题。根据NHTSA数据&#xff0…

Java糊涂包(Hutool)的安装教程并进行网络爬虫

Hutool的使用教程 1&#xff1a;在官网下载jar模块文件 Central Repository: cn/hutool/hutool-all/5.8.26https://repo1.maven.org/maven2/cn/hutool/hutool-all/5.8.26/ 下载后缀只用jar的文件 2&#xff1a;复制并到idea当中&#xff0c;右键这个模块点击增加到库 3&…

深度学习项目--基于DenseNet网络的“乳腺癌图像识别”,准确率090%+,pytorch复现

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 前言 如果说最经典的神经网络&#xff0c;ResNet肯定是一个&#xff0c;从ResNet发布后&#xff0c;很多人做了修改&#xff0c;denseNet网络无疑是最成功的…

优化用户体验:关键 Web 性能指标的获取、分析、优化方法

前言 在当今互联网高速发展的时代用户对于网页的加载速度和响应时间越来越敏感。一个性能表现不佳的网页不仅会影响用户体验&#xff0c;还可能导致用户流失。 因此&#xff0c;了解和优化网页性能指标是每个开发者的必修课。今天我们就来聊聊常见的网页性能指标以及如何获取这…

vs code配置 c/C++

1、下载VSCode Visual Studio Code - Code Editing. Redefined 安装目录可改 勾选创建桌面快捷方式 安装即可 2、汉化VSCode 点击确定 下载MinGW 由于vsCode 只是一个编辑器&#xff0c;他没有自带编译器&#xff0c;所以需要下载一个编译器"MinGW". https://…

Kotlin关键字`when`的详细用法

Kotlin关键字when的详细用法 在Kotlin中&#xff0c;when是一个强大的控制流语句&#xff0c;相当于其他语言中的switch语句&#xff0c;但更加强大且灵活。本文将详细讲解when的用法及其常见场景&#xff0c;并与Java的switch语句进行对比。 一、基本语法 基本的when语法如…

MFCday01、模式对话框

对话框类和应用程序类。 MFC中 Combo Box List Box List Control三种列表控件&#xff0c;日期控件Date Time Picker

接口测试笔记

4、接口测试自动化 接口自动化概述 HttpClient HttpClient开发过程 创建Java工程 新建libs库目录 HttpClient 工具下载及引入 https://hc.apache.org/index.html工程中引入jar包 Get请求 HttpGet方法---发起Get请求 创建HttpClient对象 CloseableHttpClient httpclient …

查找sql中涉及的表名称

import pandas as pd import datetime todaystr(datetime.date.today())filepath/Users/kangyongqing/Documents/kangyq/202303/分析模版/sql表引用提取/ file101试听课明细.txt newfilefile1.title().split(.)[0]with open(filepathfile1,r) as file:contentfile.read().lower…

如何在Ubuntu上构建编译LLVM和ISPC,以及Ubuntu上ISPC的使用方法

之前一直在 Mac 上使用 ISPC&#xff0c;奈何核心/线程太少了。最近想在 Ubuntu 上搞搞&#xff0c;但是 snap 安装的 ISPC不知道为什么只能单核&#xff0c;很奇怪&#xff0c;就想着编译一下&#xff0c;需要 Clang 和 LLVM。但是 Ubuntu 很搞&#xff0c;他的很多软件版本是…

【Spring IOC/AOP】

IOC 参考&#xff1a; Spring基础 - Spring核心之控制反转(IOC) | Java 全栈知识体系 (pdai.tech) 概述&#xff1a; Ioc 即 Inverse of Control &#xff08;控制反转&#xff09;&#xff0c;是一种设计思想&#xff0c;就是将原本在程序中手动创建对象的控制权&#xff…

电感与电容的具体应用

文章目录 一、电感应用1.​电源滤波&#xff1a;2. 储能——平滑“电流波浪”​ ​3. 调谐——校准“频率乐器”​4. 限流——防止“洪水灾害”​二、电容应用1.核心特性理解2.应用场景 三.电容电感对比 一、电感应用 1.​电源滤波&#xff1a; ​场景&#xff1a;工业设备中…

前端面试:axios 请求的底层依赖是什么?

在前端开发中&#xff0c;Axios 是一个流行的 JavaScript 库&#xff0c;用于发送 HTTP 请求。它简化了与 RESTful APIs 的交互&#xff0c;并提供了许多便利的方法与配置选项。要理解 Axios 的底层依赖&#xff0c;需要从以下几个方面进行分析&#xff1a; 1. Axios 基于 XML…