I need to get the DOMRect of an element at each frame when scrolling, but I found that when the scrolling content is complex,the callback function of the scrolling event may need to wait for a long time to trigger, and it seems that the main thread is blocked
In chrome devtools -> performance, I found that there are basically yellow frames during scrolling, These yellow frames are called Partially presented frames
https://developer.chrome.com/en/blog/new-in-devtools-100/#perf
Previously, the Frames timeline visualizes any frames with delayed main-thread work as “dropped frames”. However, there are cases where some frames may still produce visual updates (e.g. scrolling) driven by the compositor thread.
The explanation in the document seems to confirm my guess,In addition, I also log the interval between the execution of requestAnimationFrame
let before = Date.now();
let now = Date.now();
function loop(){
now = Date.now();
if (now-before > 50) {
console.log(now-before)
}
before = now;
requestAnimationFrame(loop);
}
loop()
But there is no such problem in Firefox. Is it because the performance of Firefox is much better than that of Chrome?