Issue with "Document: scroll event": Example using rAF in scroll-event callbacks is outdated, and anti-performance

[hiikezoe]

MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event

What information was incorrect, unhelpful, or incomplete?

The example using requestAnimationFrame in scroll event callbacks is totally outdated, it in fact anti-performance wise in these days.

Firing scroll events is aligned/defined in the HTML spec, all major browsers, Chrome, Safari and Firefox fire before processing requestAnimationFrame callbacks, so with the requestAnimationFrame callacks it just triggers queuing a redundant requestAnimationFrame callback and invoking the callback.

Specific section or headline?

https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event#examples

What did you expect to see?

Scroll event handlers can be used without requestAnimationFrame callbacks.

Did you test this? If so, how?

I tested with a simple example having scroll event handler and requestAnimationFrame callbacks something like this;

window.addEventListener("scroll", e => {                                        
  console.log("got a scroll event on " + document.timeline.currentTime);        
});                                                                             
requestAnimationFrame(function rAF() {                                          
  console.log("got a rAF callback on " + document.timeline.currentTime);        
  requestAnimationFrame(rAF);                                                   
});

Thank you, MDN content editors.

MDN Content page report details

• Folder: en-us/web/api/document/scroll_event
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/document/scroll_event/index.md
• Last commit: 2279e5a
• Document last modified: 2021-09-14T18:08:09.000Z

[hiikezoe]

One of my colleague @mstange realized me that the example might want to use a single requestAnimationFrame in a different way. Something like;

var registered_raf = false;
function ensure_raf() {
  if (!registered_raf) {
    window.requestAnimationFrame(() => {
      // all stuff mutating the DOM tree here.
      registered_raf = false;
    });
    registered_raf = true;
  }
}
window.addEventListener("scroll", ensure_raf);
visualViewport.addEventListener("scroll", ensure_raf);

This would actually result good performance rather than mutating DOM respectively in each callback.

I haven't run the above script, so there may be typos or some such. :)

[hiikezoe]

after looking at the example carefully, it looks like it wanted to do the same thing what I comment. :)

A big difference is that the example register the rAF callback inside the scroll event handler, I think it should be outside of the handler so that it's less confusing for web developers.

[Josh-Cena]

Related: #10580, #18843