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 树和绘制，因此最好将其减少到绝对最小值。