gpt4 book ai didi

javascript - 如何正确理解 devtools timeline?

转载 作者:数据小太阳 更新时间:2023-10-29 04:19:12 26 4
gpt4 key购买 nike

我的问题是关于 Chrome DevTools,具体来说,我有关于时间轴选项卡的问题。因此,正如我读过无数次,我的浏览器必须以 60fps 的速度渲染我的像素。有时虽然它有一些繁重的 JS 执行并阻止 60fps 的发生。此外,如果我有一些 CSS 和 JS 导致重新计算和重新绘制 DOM 树(部分或完整树),一帧也可能需要超过 ~16 毫秒。这是我们应用程序中这么长的框架的图片:

enter image description here

好的,在这里我可以清楚地看到,两个请求花费了太多时间(192 毫秒 + 14 毫秒),以至于浏览器无法绘制 60fps 并且它甚至没有接近那里。

虽然这是另一张图片:

enter image description here

所以现在好多了。现在是 ~42fps。但是现在我不明白为什么..

我有几个“更新图层树”和“绘画”的场合。一些鼠标事件,但这里所有的都是 <=1ms。

在这一帧中有 12 个这样的“事件”。其中 10 个甚至小于 0.30 毫秒,所以如果我将它们全部加起来,它肯定会小于 16 毫秒(3.57,如果我计算正确的话),但是 Chrome 说这个帧是 23.9 毫秒。

为什么 Timeline 说我这里有垃圾?我应该怎么做才能摆脱它以及如何知道瓶颈在哪里?

我在这里有点困惑,因为我在检查时间轴时肯定漏掉了一些东西。所以请给我一些详细的解释或一些关于如何摆脱这些“垃圾”以及如何检测它们的详细教程。虽然我已经阅读了几篇文章并且几乎完成了关于性能的 Udemy 类(class),但我仍然感到困惑......

谢谢

最佳答案

我怀疑时间线未报告的开放空间中正在执行“ native ”代码。

您可能想尝试使用开发工具中的“配置文件”选项卡来获取 CPU 配置文件。这将显示一个“(程序)”栏,这是正在执行的 native Chrome 代码。这可能至少是弄清楚正在发生的事情的开始。

时间轴在右侧显示白色间隙: Timeline shows white gap on right side

Profiler 显示(程序)和垃圾回收“(g...r)”发生在那里 Profiler shows Program and GC

如果那里有一大块“(程序)”,那么我认为您可以使用 chrome://tracing 选项卡,它会显示所有正在发生的 native /内部内容:

enter image description here

关于javascript - 如何正确理解 devtools timeline?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37438499/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com