小编zio*_*iom的帖子

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

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

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

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

摘要选项卡：

任务

\n
• 总时间：129.76 毫秒
\n
• 自拍时间：128.19 毫秒
\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

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

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

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

片段/JSFiddle

code is …