Chrome + Dev Tools性能不佳

Question

这是针对此问题的测试页面：https://kasheftin.github.io/chrome-vue-draggable-performance/ 基本上，它只包含10000个div和一个简单的拖动滚动插件。

我正在尝试找到非常差和卡顿的拖动性能的原因。

该问题仅在Chrome Dev Tools打开时发生，在任何dev工具选项卡上，但仅在默认模式下而非移动模式下。当我打开设备工具栏（在移动设备上模拟）时，卡顿消失了。在Firefox上也可以正常运行（Firefox带有检查器比不带Dev工具的Chrome还要快）。

在Ubuntu 20.04 / Windows 10的3台PC上进行了测试（全新安装，没有浏览器插件，在Dev工具中没有任何自定义设置，空缓存，历史记录，隐身模式，32GB RAM /顶级CPU硬件），使用Chrome 87.0.4280.66。

同时尝试了Google Chrome developer tools works very slow中的每个建议，但并没有帮助。

https://youtu.be/dOTmIG8MlbY

- Kasheftin

---

对我来说，问题是我在源代码中留下了一个条件性断点... 在移除了这个条件性断点之后，延迟问题消失了。 - luiscla27

@LuisLimas 这对我来说真是救命稻草。这完全就是我的情况，而且我花了几个小时来调试。问题在私密浏览模式下没有发生，这一点我无法解释。但看起来私密浏览模式不会共享断点配置。谢谢！！ - Mark

这个回答解决了你的问题吗？在使用Chrome开发者工具时，React应用程序变得非常缓慢。在无痕模式下运行正常。 - Patrick Roberts

Answer 1

这种情况发生的原因有很多，我决定发布这个答案，因为它在评论中非常有用。每当我发现与Dev Tools性能不佳相关的问题时，我会尝试随时补充它:

1. 源代码中的条件断点

它们可能会触发此问题，因为它们可能会被不断地评估，请将它们全部删除。在我的情况下，之后，滞后就消失了。

2. Google Chrome 更新

大多数情况下，此问题是由Chrome更新触发的，请尝试使用Google Chrome Canary或Google Chrome Developer。修复程序可能已经在这些版本中可用。

3. 删除本地覆盖

拥有太多本地覆盖可能会减慢性能，因为它增加了内存中加载的文件数量。特别是在您覆盖大文件时。

4. 禁用Chrome扩展程序

一些扩展可能是问题的原因，人们已经报告了以下问题：

1) React Developer Tools                4) Privacy Badger
2) Knockoutjs context debugger          5) uBlock Origin 
3) Brave Shields                        6) Augury

- luiscla27