这是这个问题的测试页面:https://kasheftin.github.io/chrome-vue-draggable-performance/基本上,它只是 10000 个 div + 简单的拖动滚动插件。
我正在尝试寻找阻力性能非常差和滞后的原因。
仅当 Chrome 开发工具在任何开发工具选项卡上打开时才会出现此问题,但仅限于默认模式,而不是移动模式。当我打开设备工具栏(在移动设备上模拟)时,延迟消失了。它在 Firefox 上也能正常工作(带有检查器的 Firefox 比没有开发工具的 chrome 运行得更快)。
在 3 台 PC 上测试,安装 Ubuntu 20.04 / Windows 10(全新安装,无浏览器插件,开发工具中无任何自定义设置,空缓存,历史记录,隐身模式,32GB RAM /顶级 CPU 硬件),Chrome 87.0.4280.66。
还尝试了Google Chrome开发者工具运行速度非常慢的每一个建议,但也没有帮助。
发生这种情况的原因有很多,我决定发布这个答案,因为它在评论中很有用,每次我发现开发工具性能不佳的相关问题时,我都会尝试加班补充:
它们可能会触发此问题,因为它们可能会被不断评估,并将其全部删除。就我而言,在那之后,滞后消失了。
大多数情况下,此问题是由 Chrome 更新触发的,请尝试使用 Google Chrome Canary 或 Google Chrome Developer。该修复可能已经在这些版本上可用(在此处查看更多信息)。
过多的本地覆盖会降低性能,因为它会增加内存中加载的文件数量。当您覆盖大文件时尤其如此。
某些扩展可能是导致问题的原因,人们已经报告了该问题至少涉及以下方面:
1) React Developer Tools 4) Privacy Badger
2) Knockoutjs context debugger 5) uBlock Origin
3) Brave Shields 6) Augury