前端性能优化篇——浏览器同域名并发请求对限制
在浏览器同域名并发请求都产生并发数限制,并发限制通常是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同域名并发请求对限制
在浏览器同域名并发请求都产生并发数限制,并发限制通常是4-8以内.那么我们将来了解浏览器请求并发限制的原因和优化手段. 浏览器并发数量统计 浏览器为什么要请求并发数限制? 在了解优化手段之前我们先了解 ...
- 秋色园QBlog技术原理解析:性能优化篇:access的并发极限及超级分库分散并发方案(十六)...
上节回顾: 上节 秋色园QBlog技术原理解析:性能优化篇:数据库文章表分表及分库减压方案(十五) 中, 介绍了 秋色园QBlog 在性能优化方面,从技术的优化手段,开始步入数据库设计优化,并从数据的 ...
- 【前端性能优化】浏览器渲染原理与性能优化
目录 1. 浏览器渲染基本步骤 2. 构建DOM树.CSSOM树 3. 构建渲染树 4. 计算渲染树的布局 5. 将布局渲染到屏幕上 6. 渲染优化 1. 浏览器渲染基本步骤 浏览器主要有以下步骤: ...
- 前端性能优化之——浏览器http请求并发
一.什么是http请求并发 随着现在的网页设计的越来越炫酷,功能越来复杂.伴随着的是网页加载的资源越来越多,常常一个页面加载的CSS.JS.图片.接口等超过几十上百个. 但其实,在客户端,浏览器并不一 ...
- 前端性能优化之浏览器渲染原理和关键渲染路径、复合线程、图层及优化、JS 开销及优化和 HTML 和 CSS 优化
一.浏览器渲染原理和关键渲染路径 浏览器构建渲染树,DOM 树和 CSSDOM 树合成为 Render Tree 渲染树. 浏览器的渲染流程,如下所示: JavaScript -> Style ...
- 前端性能优化篇——DNS/CDN
DNS解析 TCP/IP四层协议:应用层.传输层.网络层(网络互联层).链路层(网络接口层). DNS(Domain Name System,域名系统)和FTP(FIile Transfer Prot ...
- speeding up your web site 前端性能优化规则(一)
接上一篇:speeding up your web site 前端性能优化 -------------------------------------------------------------- ...
- 前端性能优化之——CDN优化加载
CDN优化加载 前言 一.查找资源 二.资源引入 三.添加配置 vue3配置 vue2配置 四.去掉原有的引用 拓展1:vue3.0和vue2.0的cdn包名称不一样 拓展2:element-ui 不 ...
- 秋色园QBlog技术原理解析:性能优化篇:用户和文章计数器方案(十七)
2019独角兽企业重金招聘Python工程师标准>>> 上节概要: 上节 秋色园QBlog技术原理解析:性能优化篇:access的并发极限及分库分散并发方案(十六) 中, 介绍了 ...
最新文章
- 轮播切换_javascript基础(一)——轮播图
- 俄罗斯计算机科学留学,中南大学计算机科学与技术、俄罗斯硕士留学有没有寒暑假班?...
- LintCode Python 简单级题目 96.链表划分
- mysql const ref_mysql explain详解
- spring连接jdbc_在Spring JDBC中添加C3PO连接池
- 灵魂拷问!一起刷完了这份1307页的安卓面试宝典吧,不吃透都对不起自己
- 主动安全,新华三融合生态之力!
- 3-5Tensor创建编程实例
- python数据挖掘学习】十五.Matplotlib调用imshow()函数绘制热图
- win7下让不支持代理的程序使用代理
- 基于微信小程序的美容美发技师预约系统设计与实现毕业设计毕设开题报告
- MYSQL 经纬度 地理位置
- C++中的小数位数控制和有效数字控制
- 专业的音乐创作类软件,Helio最新版软件可以帮助用户处理音乐创作中遇到的各种问题。
- 韩天峰php教程,韩天峰 - Swoole4-全新的PHP编程模式
- 《Recurrent Chunking Mechanisms for Long-Text Machine Reading Comprehension》--论文分享
- python学习-reshape()函数理解
- 第三方注解框架,黄牛刀.使用步骤和方法
- 计算机应用基础ascii码运算,自考计算机应用基础真题及答案
- Android开源实战:简单好用、含历史搜索记录的智能搜索框
热门文章
- Gson之toJson和fromJson方法
- actionscript 3.0 怎么写android 程序,(ActionScript3.0笔记)第一个程序HelloWorld!
- linux mysql学习_Linux学习笔记(MySql操作)
- java顺序表冒泡排序_冒泡排序就这么简单 - Java3y的个人空间 - OSCHINA - 中文开源技术交流社区...
- android 代码植入,Android Studio之Debug(一):运行期代码植入
- linux内核计算list的长度,Linux内核通用链表 linux/list.h阅读
- java实时更新权限_java – 如何使用Spring Security重新加载用户更新的权限
- linux qt yuv,c – 如何使用Qt中的RGBA32数据将带有YUV数据...
- LeetCode算法入门- Longest Palindromic Substring-day5
- 今日头条ocpm计费规则_入门篇|信息流广告的游戏规则—竞价机制