系统自时间较长的 Chrome 性能分析答案

【问题标题】：Chrome performance analysis with long system self time系统自时间较长的 Chrome 性能分析
【发布时间】：2020-02-13 00:20:40
【问题描述】：

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

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

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

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

摘要标签：

任务

总时间：129.76 毫秒
自拍时间：128.19 毫秒

自下而上的标签：

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

没有解释什么任务在做什么，它是什么？什么是“系统（自我）”，为什么要花这么多时间？如何解决这种“断断续续”的行为？

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

在 Chrome 中，“pointermove”是由一些长时间运行的“系统（自我）任务”处理的，这会导致糟糕的处理和断断续续的感觉（延迟）。

片段/JSFiddle

code is here ↘

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

【问题讨论】：

Chrome 似乎不适用于包含大量文本（5000 多个单词）的翻译 HTMLElement。第一次（开始和结束）用“pointermove”翻译这样的 HTMLElement，Chrome 运行良好。但是，在更改 DOM 结构（添加同级元素然后删除此同级元素）后，Chrome 由于“pointermove”而在翻译时工作无效（很差）。
“系统”是指浏览器。这里唯一的解决方案是在crbug.com 上报告问题，同时通过尝试 CSS/DOM 中的各种东西来找到解决方法。显然，如果问题中没有MCVE，我们将无能为力。
@wOxxOm ehh... 我添加了一个 sn-p。
crbug.com/1014988，除了将元素捕获到<canvas>（或<img> 并将其用作拖放占位符）之外，不确定您可以使用什么解决方法。
Chrome 似乎没有针对处理任何具有 50 多个节点内容（不仅是文本，还包括纯 HTMLElements、网格样式 CSS 等）的 HTMLElement 的“转换”进行优化。

标签： javascript performance google-chrome google-chrome-devtools

【解决方案1】：

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

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

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

【讨论】：

这里似乎不是内存限制。为我提供 6 GB 免费空间。
@James 我认为不允许 Chrome 使用系统的所有空闲内存。