面试官:前端如何去控制并发? :浏览器的内置机制已经实现控制并发

请求队列

HTTP/1.
HTTP/1.1协议中,浏览器对每个域名的并发连接数有默认限制。这个限制通常是6个,但不同浏览器可能会有所不同。具体来说:

  • 并发连接数限制:浏览器在同一时间内对每个域名只能并行发送6个请求。这6个请求可以是任何类型的资源请求,包括HTML、CSS、JavaScript、图片等。
  • 请求队列:当超过6个请求时,浏览器会将多余的请求放入队列中,等待前面的请求完成后再依次发送。这个队列机制确保了请求的有序处理,避免了过多的并发请求导致的网络拥塞和资源浪费。

示例:

假设一个页面需要加载10个资源,每个资源都在同一个域名下。浏览器会首先并行发送6个请求,其余4个请求会被放入队列中。当其中一个请求完成后,队列中的一个请求会被发送出去,如此循环,直到所有请求都完成

HTTP/2:
HTTP/2协议引入了多路复用(Multiplexing)技术,允许在一个连接上并行处理多个请求。这大大减少了连接的开销和延迟,提高了请求的处理效率。具体来说:

  • 多路复用:HTTP/2允许多个请求和响应在同一TCP连接上并行传输。这意味着即使在同一时间内发送多个请求,也不会因为连接数的限制而阻塞。
  • 头部压缩:HTTP/2使用HPACK压缩算法来压缩请求和响应的头部信息,减少了头部信息的传输开销。
  • 服务器推送:HTTP/2支持服务器推送(Server Push)技术,服务器可以在客户端请求之前主动推送相关资源,进一步减少请求的往返时间。

示例:

假设一个页面需要加载10个资源,每个资源都在同一个域名下。在HTTP/2协议下,浏览器可以一次性并行发送所有10个请求,而不需要等待前面的请求完成。服务器会并行处理这些请求,并通过同一个连接将响应返回给浏览器。

详细解释

HTTP/1.1 的并发连接限制

1.并发连接数:

  1. Chrome:6个
  2. Firefox:6个
  3. Safari:6个
  4. Edge:6个
  5. Internet Explorer:6个

2.请求队列

  • 当请求超过并发连接数限制时,浏览器会将多余的请求放入队列中。
  • 队列中的请求会按照先进先出(FIFO)的原则依次发送。
  • 这种机制确保了请求的有序处理,避免了过多的并发请求导致的网络拥塞和资源浪费

HTTP/2 的多路复用

1.多路复用:

  • 并行传输:多个请求和响应可以在同一TCP连接上并行传输,而不必等待前面的请求完成
  • 减少延迟:由于多个请求可以并行处理,减少了请求的往返时间,提高了页面加载速度。
  • 资源利用:减少了建立和关闭连接的开销,提高了网络资源的利用率。

2.头部压缩:

  • HPACK算法:HTTP/2使用HPACK压缩算法来压缩请求和响应的头部信息,减少了头部信息的传输开销。
  • 提高效率:压缩后的头部信息更小,传输更快,提高了请求的处理效率。

3.服务器推送

  • 主动推送:服务器可以在客户端请求之前主动推送相关资源,进一步减少请求的往返时间
  • 优化加载:通过服务器推送,可以提前加载关键资源,提高页面的加载速度和用户体验。

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Kafka面试题(三)

1、kafka是如何做到高效读写 1)Kafka 本身是分布式集群,可以采用分区技术,并行度高。 2)读数据采用稀疏索引,可以快速定位要消费的数据。(mysql中索引多了之后,写入速度就慢了)。 …

【Pikachu】任意文件上传实战

将过去和羁绊全部丢弃,不要吝惜那为了梦想流下的泪水。 1.不安全的文件上传漏洞概述 不安全的文件上传漏洞概述 文件上传功能在web应用系统很常见,比如很多网站注册的时候需要上传头像、上传附件等等。当用户点击上传按钮后,后台会对上传的…

C++【STL容器系列(二)】vector的模拟实现

文章目录 1. vector的结构2. vector的默认成员函数2.1构造函数2.1.1 默认构造2.1.2 迭代器构造2.1.3 用n个val初始化构造 2.2 拷贝构造2.3 析构函数2.4 operator 3. vector iterator函数3.1 begin 和 cbegin函数3.2 end() 和 cend()函数 4. vector的小函数4.1 size函数4.2 capa…

边缘检测的100种方法

文章目录 什么是边缘检测 ?一、边缘检测算子:Sobel算子、Scharr算子、Laplacian算子、Canny算子二、梯度计算 顶帽 黑帽 拉普拉斯金字塔三、相位一致性(Phase Congruency,PC)3.1、底层代码(2D)3.2、ski…

【Linux探索学习】第十二弹——初识进程:进程的定义、描述和一些简单的相关操作

Linux学习笔记: https://blog.csdn.net/2301_80220607/category_12805278.html?spm1001.2014.3001.5482 前言: 在前面经过那么多篇的铺垫后,今天我们正式进入Linux学习的第一个重难点——进程,理解进程对于我们学习操作系统的其…

Java项目实战II基于微信小程序的订餐系统(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导 一、前言 随着移动互联网技术的飞速发展&#xff0…

触想染织厂MES产线终端工位机,打造数字化高效车间

一、行业发展背景 在纺织细分领域中,印染行业一直是整个产业链的效率短板,因其涉及染色、定型及后整理加工等多个复杂工艺、上百个参数变量,质量波动较大,依赖个人经验和手工操作,常常陷入高成本、低效率发展困境。 △…

CSS查缺补漏 two

11.6~11.11查缺补漏 一、熟记1.结构伪类选择器2.伪元素选择器3.盒子模型4.居中对齐(重中之重!!!)5.清除默认样式6.元素溢出(滚动条)7.行内元素 – 内外边距问题8.圆角9 .盒子阴影(拓…

Taro React-Native IOS 打包发布

http网络请求不到 配置 fix react-native facebook::flipper::SocketCertificateProvider‘ (aka ‘int‘) is not a function or func_rn运行debug提示flipper-CSDN博客 Xcode 15(iOS17)编译适配报错_no template named function in namespace std-CS…

本地搭建你的私有网盘:在Ubuntu上使用Portainer CE安装NextCloud

文章目录 前言1. 在PortainerCE中创建NextCloud容器2. 公网远程访问本地NextCloud容器2.1 内网穿透工具安装3.2 创建远程连接公网地址 3. 固定NextCloud私有云盘公网地址 前言 本篇文章介绍如何在本地使用Portainer CE可视化图形界面创建NextCloud私有网盘容器,并结…

超好用shell脚本NuShell mac安装

利用管道控制任意系统 Nu 可以在 Linux、macOS 和 Windows 上运行。一次学习,处处可用。 一切皆数据 Nu 管道使用结构化数据,你可以用同样的方式安全地选择,过滤和排序。停止解析字符串,开始解决问题。 强大的插件系统 具备强…

游戏引擎中LOD渲染技术

一.LOD(Level Of Detail) 为了降低GPU渲染压力,根据摄像机距离模型距离将面数较高的模型替换为面数较低的模型. LOD LOD0(distance<10) LOD1(distance<20) LOD2(distance<30) 故通常引擎中MetaMesh是由一个或多个LOD模型构成. MetaMesh mesh mesh.lod1 mesh.lod…

web前端动画按钮(附源代码)

效果图 源代码 HTML部分 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> …

昇思大模型平台打卡体验活动:项目5基于MindSpore实现Transformer机器翻译

首先仍然是先登录大模型体验平台 https://xihe.mindspore.cn/my/clouddev 启动&#xff01;&#xff01; 进入环境之后&#xff0c;即可开始运行notebook&#xff0c; Transformer 模型与实现 Transformer 是一种由 Vaswani 等人在 2017 年提出的神经网络结构&#xff08;论文…

‌关于人工智能(AI)的发展现状和未来趋势的详细分析!

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日将继续分享关于‌人工智能&#xff08;AI&#x…

提高排名的有效策略与实践指南

内容概要 在现代数字化时代&#xff0c;提高排名不仅是企业营销的关键&#xff0c;更是提升品牌知名度和客户粘性的有效途径。为了更好地理解这一主题&#xff0c;我们从多个方面进行详细分析。首先&#xff0c;明确"排名"的基本概念是非常重要的&#xff0c;它通常…

【Linux】动静态库

目录 1、制作静态库 2、站在使用者角度使用库 3、制作动态库 4、动态库是怎么被加载的 1、制作静态库 之前对动静态库的认识&#xff1a; libXXX.a-----静态库 静态链接&#xff1a;将库当中的代码拷贝到最终的可执行程序里&#xff0c;也就是&#xff0c;自己的源代码会变成…

AI绘画到底怎么画,才能出好图!一文详解

前言 在当今数字化的时代&#xff0c;AI 绘画以其强大的创造力和便捷性&#xff0c;成为了众多艺术爱好者和创作者的新宠。无论是专业画家想要拓展创作思路&#xff0c;还是业余爱好者渴望展现自己的创意&#xff0c;AI 绘画都提供了无限的可能。那么&#xff0c;究竟如何才能…

【React】深入理解 JSX语法

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 深入理解 JSX语法1. JSX 简介2. JSX 的基本语法2.1 基本结构2.2 与普通 JavaScr…

Kafka-Eagle 监控 搭建

Kafka-Eagle 框架可以监控 Kafka 集群的整体运行情况&#xff0c;在生产环境中经常使用。 在生产过程中&#xff0c;想创建topic、查看所有topic、想查看某个topic 想查看分区等&#xff0c;都需要写命令&#xff0c;能不能有一个图形化的界面&#xff0c;让我们操作呢&#x…