什么,你还不会chrome自定义性能降速?

前言

彦祖们,在日常开发中,不知道你们是否遇到过这样的场景

在本地开发非常流畅 功能验证也没有问题

但是一上生产环境就各种bug,一问现场设备用的是 windows7 32位 4g内存

彦祖们的心情是不是和我一样沉重

定位出来是 cpu 性能问题,那么我们本地该如何来模拟这种 cpu 降速场景呢?

业务场景复现

为了验证这个问题

我们生成 100w 条数据来测试下消耗的时间

为了数据稳定,我们运行 3 次取平均值

测试结果

1.本地 chrome 测试

平均值:115.5

2.现场设备测试

平均值: 880.7

实际测出来大概是 8倍 左右的降速

性能降速模拟

那么我们必须在本地模拟一个类似的低性能场景

其实在 chrome devtools 已经提供了 性能节流 配置

不过很可惜 官方只提供了 4x,6x 的选项

自定义性能降速

那么我们如何做到自定义呢?

不卖关子了,直接进主题

下面一步步跟着笔者来模拟这种场景吧

1.我们打开 chrome devtools

2.找到这个小齿轮,点击 3.点击实验功能

4.勾选 Protocol Monitor

5.关闭 devtools 重新打开

6.点击这里的三个点,点击 协议监视器

7.点击这个三角按钮(可视化方式)

这里我们也可以使用 发送原始 CPD 命令 方式(本文不做过多赘述)

发送方式:

{"command":"Emulation.setCPUThrottlingRate","parameters":{"rate": 10}}

更多原始命令见

chromedevtools.github.io/devtools-pr...

8.重点来了!!!笔者在这里踩了一个大坑

如果是 vue 或者 react 等框架开发的单页面

我们需要点击这里的 target (不然会报错),点击主要的域名 9.选择 command 命令的 Emulation.setCPUThrottlingRate

rate 我们设置为 10 (表示 10 倍降速)

10.点击执行按钮

我们会发现成功执行了这个指令

到此为此我们的 chrome cpu 性能就已经成功降速 10 倍了

自定义降速验证

让我们来跑一下刚才的生成数据的脚本

js 复制代码
const start = performance.now()
const arr = Array.from({length:100*10000},(_,index)=>{
  return {
    index:index,
    name:'test'+index
  }
})
const time = performance.now() - start

看下三次运行结果

同样取平均值 1098.3 相比 115.5 就是 9.5 倍左右.

非常完美

写在最后

本次分享虽然没有什么技术代码,但是在遇到问题之后

从 0 到 1 的寻找和探索解决方案的过程

实属是一个宝贵的经历~

感谢彦祖们的阅读

个人能力有限

如有不对,欢迎指正 🌟 如有帮助,建议小心心大拇指三连🌟

相关推荐
热爱编程的小曾2 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin13 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox26 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
麦麦大数据1 小时前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox