Google Chrome时间轴视图，非常慢的绘制操作，包含大量更新层树调用

Question

我看到一个过度的绘画操作，需要花费1秒多才能在Google Chrome中渲染。我有什么方法可以进一步诊断根本原因是什么？我可以看到它是由大量调用“更新层树”引起的，但我不知道从哪里开始。代码只是替换滚动事件中处理的单个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树和绘制，因此最好将其减少到绝对最小值。