What happened to the promising virtual-scroller element?
The virtual-list concept has been well documented in mobile development but has not yet come natively to the web. Android developers are using it with RecyclerView, iOS developers with UITableView. Let’s take a look at this concept that was promised to come to the web with a native built-in web component.
/ what-happened-to-the-promising-virtual-scr...
What is a virtual list in a nutshell?
First, let’s talk about what problem a normal list has. If you take a look at the repository below, you will find a page creating a list containing 50 000 rows.
Web browsers are capable are rendering that many rows but it takes a long amount of time. You can see in the pie chart below how Rendering is taking over at the performance of your website.
A traditional list is easy to reason about, it renders the layout of all the rows present in the DOM. Nothing else is happening. In contrast, a virtual list will only render rows visible on the viewport, and a few rows above and below to anticipate scrolling.
The screen can only show 4 rows, so a virtual list might render 8 with 4 in view, 2 above, and 2 below. When you scroll down, the top rows are moved to the bottom, the layout is kept but the data is changed appropriately. Android name RecyclerView comes from this act to use a row out of the screen to create another with it.
When rerender happens to a normal list, when resizing your window, for example, the entire list is going through the process again. A virtual list will only have to rerender a part of the list.
HTTP 203 episode on content-visibility:
• Slashing layout cost with content-visibili...
00:00 Introduction
00:20 What is a virtual list?
02:27 virtual-scroller by WICG
03:47 main difference between virtual and non-virtual list
04:20 how to try virtual-scroller
04:40 future of virtual-scroller
05:17 Outro
Follow me on
Medium: / floriel
GitHub: https://github.com/Ffloriel