CODEWITHSUNDEEP
google-chromerepaint
magritte
magritte

Reputation: 7646

Google Chrome timeline view, very slow paint operations with lots of update layer tree calls

I'm seeing an excessive paint operation which is taking over 1 second to render in Google Chrome. Is there any way for me to diagnose further what the root cause is? I can see that it's caused by lots of calls to "update layer tree", but I'm not sure where to go from here. The code is just replacing some innerHTML on a single DOM node handled in a scroll event, so I would expect a single recalculate style and then a single paint, why would i see all these update layer tree and separate paint calls?

enter image description here

Upvotes: 7

Views: 1974

Answers (1)

user1693593
user1693593

Reputation:

You can delay the update on the scroll event by using a so-called debouncing, or, delaying the update until a timeout occur using a timer that is reset every time an event is received:

Example

There is no code shown so this is just a general approach. Implement as needed:

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
}
  • Every time the page is scrolled, an scroll event is broadcast and received in the handler.
  • If the timer is still running it will be reset, a new timer invoked.
  • If the scroll event takes more than 150ms (in this case, tweak as needed), the actual update is performed.

This will allow the browser to broadcast a bunch of events without spawning a bunch of updates. In your case the update will affect the DOM tree and paint so it is best to reduce it to an absolute minimum.

Upvotes: 1

Related Questions