发送请求的传送机制优化--浏览器细节深究(2)

背景

首先介绍一下我们项目的架构:

可以看到我们的平台分为四个部分:1. 监控中台 2. npm 包 3. 产生错误 & 性能信息的页面 4. 后端

更详细的介绍可以看这里--让我们一起写一个前端监控系统吧!(1)

首先我们需要知道,我们想要使用 npm 包,其实就是把 npm 包植入 "产生错误 & 性能信息的页面",那么我们传递信息的过程本身,就会给"产生错误 & 性能信息的页面"带来相当大的负担,那么我们需要去做一个优化,怎么去做呢?

操作思路

最开始我们使用的是轮询策略,那么这种行为必然带来问题------"持续不断的请求拖垮页面性能。"

然后我们就开始了优化的思路,第一个方面是优化轮询,轮询本身的逻辑在于产生一个请求就往后端发送,而我们优化的思路在于合并这些发送的请求。

这里使用的东西主要有两个------------localStorage + 队列。

我们这里有两个核心的判断逻辑,第一个核心逻辑:当队列的长度 >= 20 的时候,我们就把队列清空,也就是把我们的值传递到后端去;第二个核心逻辑:每过一秒钟,如果队列不为空,我们进行一次倾倒,也就是把队列中的值发送到后端去。

那么这里还有一些考量:

  1. 为什么不用 SessionStorage?
  • 因为我们需要跨页面通信,SessionStorage 无法满足。
  1. 为什么不用 indexDB
  • 首先是 indexDB 的写法过于复杂了,而它带来的好处是什么呢?主要是容量很大很大。但是我们需要这么大的容量吗?显然不需要,因为我们队列在超过 20 个之后会进行清空操作,所以没有必要花时间精力去写 indexDB。
  • 另一方面 localStorage 的 5MB 已经够用了。
  • cookie 4kb 的容量就更不用说了。

但是这里仍然存在一个问题,那就是 1s 中间也可能无法传递信息。

举个例子,用户在某个一秒的中间关闭了浏览器,导致存在队列里的信息无法发送给后端,我们这时候该怎么处理?

那么我们这个时候就要拿出之前用的一个 API------Navigator.sendBeacon,它可以在浏览器卸载的时候发送请求给后端,从而把没来得及发出去的数据传给后端。

下篇文章会仔细的介绍一下这个"浏览器卸载"到底是啥时候~

结语

那么这就是本篇文章的所有内容啦,可以留个赞再走莫~

相关推荐
gnip5 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫5 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel6 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼7 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手10 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法11 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku11 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode11 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu11 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu11 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript