search

fergald / virtual-scroller-demos

Demos of the <virtual-scroller> element
Other
10 stars 2 forks source link

Don't browsers already optimize this? #5

Closed trusktr closed 4 years ago

trusktr commented 4 years ago

I think that some browsers already decide when not to render things (though maybe it would be good to make such a feature official and spec'd). F.e. if you have lots of content in Chrome, and you scroll fast enough, you'll see chunks of parts of the document that aren't rendered yet.

fergald commented 4 years ago

There are different stages of rendering. So yes, the browsers do not prepare pixels for parts of the doc that are off-screen. However computed style and the layout/position of every element is computed even if the pixels are not. These steps grow with the size of the DOM content in the scroller and can cost 100s of ms on large content.

By using https://github.com/WICG/display-locking/ even these other steps are skipped, making the cost of an update proportional only to the visible portion of the scroller.

I recommend looking at

https://docs.google.com/presentation/d/1zEso2AeLlXdtDrYDcovG8bBXKFKqb7500Hw8ZuWAsyo/edit

and in particular the video on P20 of the HTML standard with and without this virtual scroller. It's 10MB of DOM, resizing and scrolling at 60FPS.