什么,你还不会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 的寻找和探索解决方案的过程

实属是一个宝贵的经历~

感谢彦祖们的阅读

个人能力有限

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

相关推荐
拾光拾趣录20 分钟前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃37 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军38 分钟前
React 协调器 render 阶段
前端·react.js·前端框架
中微子41 分钟前
Blob 对象及 Base64 转换指南
前端
风铃喵游41 分钟前
让大模型调用MCP服务变得超级简单
前端·人工智能
markyankee10142 分钟前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
中微子42 分钟前
智能前端实践之 shot-word demo
前端
归于尽43 分钟前
智能前端小魔术,让图片开口说单词
前端·react.js
用户98738245810143 分钟前
vite 插件
前端
无数山1 小时前
autorelease pool
前端