google-chrome - Google Chrome 时间轴 View ，绘制操作非常慢，有大量更新图层树调用

Question

我发现 Google Chrome 中的绘制操作过多，渲染时间超过 1 秒。有没有办法让我进一步诊断根本原因是什么？我可以看到这是由大量调用“更新图层树”引起的，但我不确定从这里去哪里。代码只是替换在滚动事件中处理的单个 DOM 节点上的一些innerHTML，所以我希望有一个重新计算样式，然后是一个绘制，为什么我会看到所有这些更新层树和单独的绘制调用？

Answer 1

您可以通过使用所谓的去抖动来延迟滚动事件的更新，或者使用每次收到事件时都会重置的计时器来延迟更新直到发生超时:

示例

没有显示代码，因此这只是一般方法。根据需要实现:

var timerID = null;   // for the timer. must be in parent or global scope

window.addEventListener("scroll", function() {
    clearTimeout(timerID);                // clear current running timer (none is ok!)
    timerID = setTimeout(update, 150);    // set new timer, here with 150ms timeout
});

function update() {
    // do the update here
}

• 每次滚动页面时，都会在处理程序中广播并接收滚动事件。
• 如果计时器仍在运行，它将被重置，并调用新的计时器。
• 如果滚动事件花费的时间超过 150 毫秒(在这种情况下，请根据需要进行调整)，则会执行实际更新。

这将允许浏览器广播一堆事件，而不会产生一堆更新。在您的情况下，更新将影响 DOM 树和绘制，因此最好将其减少到绝对最小值。