前言

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

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

但是一上生产环境就各种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 的寻找和探索解决方案的过程

实属是一个宝贵的经历~

感谢彦祖们的阅读

个人能力有限

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

什么，你还不会chrome自定义性能降速？