长系统自检时间下的Chrome性能分析

Question

我正在分析网页性能。网页包含一个“pointermove”事件的处理程序，用于更改 HTMLElement（总共大约 10 个 DOM 后代）的“transform：translate(x,y)”。

\n

在 Chrome 浏览器中，在特定条件下，“pointermove”不会以非常高效的方式处理 - 在“pointermove”期间，会发生延迟和转换属性的“不稳定”变化。

\n

相反，在 Firefox 中，一切都是高性能的（在这些特定条件下）。

\n

在 Chrome 的性能分析中，我在“pointermove”期间检测到很长的“任务”。它说网页 JS 函数（和渲染）大约花费了 1 毫秒，但“系统（自身）”花费了 128 毫秒。

\n

摘要选项卡：

\n

任务

\n

\n
• 总时间：129.76 毫秒
\n
• 自拍时间：128.19 毫秒
\n

\n

自下而上的选项卡：

\n

\n
• 0.6 ms 37.5 % 更新层树
\n
• 0.3 ms 19.9 % 复合层
\n
• 0.2 毫秒 14.8% 命中测试
\n
• 0.2 ms 13.8 % 重新计算样式
\n

\n

没有解释什么任务正在做什么以及它是什么？什么是“系统（自我）”以及为什么花了这么长时间？如何化解这种“乱七八糟”的行为呢？

\n

我期望对“pointermove”事件进行高性能处理，就像在 Firefox 中一样。

\n

在 Chrome 中，“pointermove”是通过一些长时间运行的“系统（自身）任务”来处理的，这会导致糟糕的处理和不稳定的感觉（延迟）。

\n

片段/JSFiddle

\n

code is here \xe2\x86\x98\n

\n

https://jsfiddle.net/ziom1/f8jbyz52/

\n

Answer 1

我的 Notes AngularJS 应用程序也遇到了类似的问题，该应用程序的文本区域内有大文本。移动光标时，性能选项卡花费了约 600 毫秒System (self)，其余时间为 0 或 1 毫秒。

我本来打算创建一个问题，但发现了这个问题，然后想向 Chromium 报告错误。但后来我检查了 Chrome 使用了多少内存。我打开了很多带有大量重型应用程序的选项卡。例如多个 YouTube 链接、MS Teams 等以及隐藏在组中的页面。我打开了任务管理器并杀死了一些内存最多的进程/选项卡。现在我的应用程序运行良好。

我可能会达到浏览器内存的限制。请注意，我有 16GB，在该系统上运行 Firefox（运行 Chrome）不是问题。