前端性能优化篇——浏览器同域名并发请求对限制

在浏览器同域名并发请求都产生并发数限制,并发限制通常是4~8以内,那么来了解浏览器请求并发限制的原因和优化手段。
浏览器并发数量统计在这里插入图片描述

浏览器为什么要请求并发数限制?

在了解优化手段之前我们先了解浏览器限制并发请求的原因
1.对操作系统端口资源考虑

PC总端口数为65536,那么一个TCP(http也是tcp)链接就占用一个端口。操作系统通常会对总端口一半开放对外请求,以防端口数量不被迅速消耗殆尽。

2.过多并发导致频繁切换产生性能问题

一个线程对应处理一个http请求,那么如果并发数量巨大的话会导致线程频繁切换。而线程的上下文切换有时候并不是轻量级的资源。这导致得不偿失,所以请求控制器里面会产生一个链接池,以复用之前的链接。所以我们可以看作同域名下链接池最大为4~8个,如果链接池全部被使用会阻塞后面请求任务,等待有空闲链接时执行后续任务。

3.避免同一客服端并发大量请求超过服务端的并发阈值

在服务端通常都对同一个客户端来源设置并发阀值避免恶意攻击,如果浏览器不对同一域名做并发限制可能会导致超过服务端的并发阀值被BAN掉。

4.客户端良知机制

为了防止两个应用抢占资源时候导致强势一方无限制的获取资源导致弱势一方永远阻塞状态。

优化手段

那么我们知道了浏览器并发限制的原因我们可以从下面几方面入手优化
域名散发

将请求通过多个域名分开请求,比如 100A请求 -> (25A + 25B + 25C + 25D)。但是建议4个左右。因为过多域名会导致dns解析性能问题。

cookie free

cookie free其实是区分主站点请求与其他次要请求的cookie存储和携带。当网站的cookie大小5kb,发送150个请求全部携带上cookie就是750kb,在1024 Kbps的常见上行带宽下,需要长达7.5秒左右才能全部发送完毕。尽管这些请求可能存在并发执行,但是在静态资源请求上几乎没必要携带cookie信息。所以我们可以启用主站点域名和其他域名进行请求区分cookie的携带。

小图片合并成大图(雪碧图)

把多张小图片合并成一张大图,通过css的background背景精灵定位显示。减少图片资源的请求数量,雪碧图就是常见的一种手段

设置Cache-Control max-age

当我们确定项目那些资源是长久不变化的我们对其设置版本号控制和Cache-Control max-age 进行长时间缓存,减少浏览器对资源重新请求。

loading Image 懒加载

懒加载其实是大型网站通常必备对一个手段,为了防止无意义加载场景。通常用户在进来对第一屏对内容不会全部查看,可能在浏览过程中已经跳转到其他页面。那么在用户浏览到的地方没必要进行图片加载、节点创建等操作,可以等用户滚动到节点内容区域再进行显示和加载内容。

PWA(渐进式应用)

近几年比较火的一个优化手段,通过web Service 对当前应用请求过的请求进行缓存到客户端,用户下次访问页面或刷新页面都是直接从客户端本机直接读取之前的response。可以细化控制缓存静态资源、api请求等。但是pwa缓存有限制条件:只能缓存https协议、主站点域名的请求。并且之前缓存过的请求需要在下次PWA机制启动时候进行清除和刷新,这样会导致缓存的资源需要两次访问页面才能发生更新。

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

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

相关文章

帧大小超过交换机mtu_交换机的三种交换方式

交换机是一种用于电(光)信号转发的网络设备,它可以为接入交换机的任意两个网络节点提供独享的电信号通路。交换机拥有一条高带宽的背部总线和内部交换矩阵,在同一时刻可进行多个端口对之间的数据传输,交换机的传输模式…

前端性能优化篇——浏览器http同域名并发请求对限制

在浏览器同域名并发请求都产生并发数限制,并发限制通常是4~8以内。那么我们将来了解浏览器请求并发限制的原因和优化手段。 浏览器并发数量统计 浏览器为什么要请求并发数限制? 在了解优化手段之前我们先了解浏览器限制并发请求的原因 1.对操…

rstudio的数据集怎么建立和保存_这个40M的小工具助你在windows下处理数据如虎添翼...

使用windows系统时,如何获取一个大小为1M的文件的行数呢?一般是选择用excel或notepad等软件打开文件,然后查看最后一行的行号,那如果是想快速获取一个大小为1G的文件的行数呢?或是想快速获取100个大小为1M的文件的行数…

mongo 唯一约束索引_Java:MySQL 基础知识+索引相关

阅读本文前,请您先点击上面的蓝色字体,再点击“关注”,这样您就可以继续免费收到最新文章了。每天都有分享。完全是免费订阅,请放心关注。注:本文转载自网络,不代表本平台立场,仅供读者参考&…

Javascript性能优化【内联缓存】 V8引擎特性

javascript 是单线程、动态类型语言,那么我们在编码时候如何编写性能最优代码呢?下面将讲解V8引擎的内联优化。利用内联缓存这个特性我们可以编写更加优秀的代码。 什么是内联缓存 引用官方的描述:内联缓存(Inline caching&#…

bootstrap 垂直居中 布局_CSS3 flex 布局必须要掌握的知识点

flex 布局已经流行好久了,从最开始大家都在用非官方标准的 box 布局(display: box; display: -webkit-box;),到后来的各种兼容写法,再到后来基本上就是只用 flex 了。毕竟标准就是标准,虽然有时候会迟到,但是最终肯定还…

如何在代码中让按钮高亮_各种博客的代码高亮是如何实现的

本文来自 「Vue虚拟实验」的小伙伴 余xiaoy,在做 Lovue 项目的时候,他负责了代码高亮显示功能,目前实现了代码高亮、主题切换、某行代码特殊显示、显示行号等功能,效果如下。下面介绍如何通过 Vue 来完成这个功能:Vue…

如何把表格做成源代码_他来了,他来了,文字、表格、公式图片识别神器V0.1测试版...

他来了,他来了,Mathpix拜拜了~~~文字、表格、公式图片识别神器V0.1测试版俺不是标题党!!!开发背景日常工作中经常遇到大量的图片版文本、表格、公式需要编辑;用手敲?也太OUT了吧,好歹…

离线登陆_iphone手机,苹果手机如何登陆网易163邮箱

在使用iPhone系统邮箱的时候,我们在配置的时候可能会遇到各种各样的问题,导致无法在系统邮件里面使用163邮箱。主要是手机客户端的密码和网页登陆的密码是不一样的。常见问题下面就是有人在使用的时候遇到的问题:登陆密码错误有人知道怎么在i…

Vue 封装echarts饼状图(Pie)组件

目的&#xff1a;减少重复代码&#xff0c;便于维护 效果显示&#xff1a; 组件代码 <template><div class"ldw-data-content-box"><div class"ldw-chilren-box"><div class"title"><div>{{ title }}</div>…

积分上下限无穷_数学分析|第九章 定积分利用等价无穷小量和定积分定义解决数列极限问题总结...

当公式或文字展示不完全时&#xff0c;记得向左←滑动哦&#xff01;摘要&#xff1a; 当我们利用等价无穷小量时&#xff0c;不仅仅可以利用等价替换&#xff0c;有的时候我们需要利用极限的定义语言来解决问题&#xff0c;当等价无穷小量和连加数列结合在一起时&#xff0c;虽…

关于配置Webapck的 exclude 不过滤 node_modules Babel却没有处理转换node_modules的源码

最近对公司的项目引入了 nanoid 替换 uuid 的使用。但是在sentry日志中发现Unexpected token >的错误。立马查看编译后bunld发现 nanoid 箭头函数没有被转换。所以对此记录一下原因和解决办法。 报错的原因 1.nanoid 源码是没有经过babel转换的。 查看nanoid的源码&#x…

android 贝塞尔曲线_OpenGL 实践之贝塞尔曲线绘制

说到贝塞尔曲线&#xff0c;大家肯定都不陌生&#xff0c;网上有很多关于介绍和理解贝塞尔曲线的优秀文章和动态图。以下两个是比较经典的动图了。二阶贝塞尔曲线&#xff1a;三阶贝塞尔曲线&#xff1a;由于在工作中经常要和贝塞尔曲线打交道&#xff0c;所以简单说一下自己的…

Node.js Event loop 图解

直接上自己制作的流程图

支持串行隔离级别_从0到1理解数据库事务(上):并发问题与隔离级别

最近准备写一篇关于Spanner事务的分享&#xff0c;所以先分享一些基础知识&#xff0c;涉及ACID、隔离级别、MVCC、锁&#xff0c;由于太长&#xff0c;只好拆分成上下两篇&#xff1a;上&#xff1a;并发问题与隔离级别主要讲事务所要解决的问题、思路&#xff0c;先理解为什么…

如何发布接口_Devops下的接口全生命周期管理与测试

什么是devops&#xff1f;随着时间的推移&#xff0c;devops的定义也在不断的演进。对于其定义可能出现千人千面&#xff0c;但从核心观点&#xff0c;整体业界还是保持着一致的认识。DevOps不是单一的技术或者工具&#xff0c;甚至不只是一个流程&#xff0c;而是包含应用设计…

查看mysql日志post_(转)MySQL 日志组提交

原文:https://jin-yang.github.io/post/mysql-group-commit.html组提交 (group commit) 是为了优化写日志时的刷磁盘问题&#xff0c;从最初只支持 InnoDB redo log 组提交&#xff0c;到 5.6 官方版本同时支持 redo log 和 binlog 组提交&#xff0c;大大提高了 MySQL 的事务处…

like语句太慢 sqlserver_SQLServer找出执行慢的SQL语句

SELECT(total_elapsed_time / execution_count)/1000 N平均时间ms,total_elapsed_time/1000 N总花费时间ms,total_worker_time/1000 N所用的CPU总时间ms,total_physical_reads N物理读取总次数,total_logical_reads/execution_count N每次逻辑读次数,total_logical_reads N逻辑…

苹果cms10自适应模板_哪里有苹果cms10自适应模板?

1&#xff0c;苹果CMSv10大图轮播高端大气自适应视频网站模板源码苹果cms10自适应模板下载地址&#xff1a;https://www.mytheme.cn/maccms/54.html第一款大图宽屏的海报轮播幻灯样式&#xff0c;宽屏模板支持DIY扩展自适应影视模板苹果cms10自适应模板苹果cms10自适应模板2&am…

python实现进程通信_python进程间的通讯实现

1&#xff1a;进程间通讯的方法&#xff1a;apply_async()非阻塞式通讯 apply()阻塞式通讯2&#xff1a;使用Queue实现对Process创建的进程间通讯&#xff0c;Queue本身是一个消息队列程序&#xff0c;Queue常用方法&#xff1a;Queue.qsize():返回当前消息队列的消息数量Q…