virtual-scroller: Let there be less (DOM) (Chrome Dev Summit 2018)

[@aram5642]

The hidden culprit of virtual scroller (at least in angular CDK) is that the rows have to be of same height. That is not always a design-acceptable requirement

[@NathanRidley]

Google needs to implement virtual scrolling in the Chrome developer tools console. Too many logs and the dev tools grind to a halt.

[@ScrinGuard]

In what situation? In my case when I use the scroll event I use a debounce function to throttle calls if it is called more than once in a short period of time, only one instance will be called.

[@NathanRidley]

@@ScrinGuard In the console, not in the viewport. The console is implemented by the Chromium dev team, so unless you fork your own version of Chromium and implement a better developer console, the answer to "in what situation" is "in every situation where you end up with thousands of log messages"

[@malipetek]

Just hover over a base64 image url

[@arkanciscan]

I still want to know how a is going to ctrl-f an infinite list of items that aren't in the DOM

[@VincentKammerer]

This is not a goal of this work, as it isn't even reachable. However, the goal can be to ctrl-f a very large (as opposed to infinite) list of items that are in the DOM but not rendered.

[@Trucidare]

Skip to 24:45. He explains it as "Invisible DOM" which allows for ctrl+f and page indexing even though it's not actually rendered on the page.

[@llothar68]

@@elf-pavlik The items are not in the DOM thats part of the speed. You will need to provide your own search functionality.

[@Oswee]

ExtJS long time ago had this kind of feature but this looks really good. Really important feature especially in enterprise grade SaaS where large tables should be rendered.

[@overaul]

You have the same problem with any infinite scroll based feed

[@mohammadkazemzadeh2299]

what happened to this project after 3 years?

[@Sebienbeau]

Impressive, but two questions: * Is "invisible" the only way to allow search in page to work? Because you still have to create a DOM node for each list item, loading time will be slow, leading to freezing view on loading... Could the framework query for text content with JavaScript API, without having to create a DOM node? * All items have variable size. How to you compute the total scrollbar size without rendering each items?!

[@dinikasaxena]

Really exciting! These are all the obvious things you'd want with js framework's implementation of virtual scrolling. I'm glad there's work being done on this

[@AdamYarris]

Will the virtual scroller be compatible with things like CSS's nth-child and related pseudo-classes?

[@slothymcgee6388]

or root variables?

[@BitSec]

I think Yes because at 10:00 in you will see that they change the css to dark or bigger items and it also works for things that aren't yet inside the visual area.

[@YinonOved]

i think in some cases you would want it to ignore list elements which are not in dom yet - like for example not showing a bottom line if the element is last

[@wedding_photography]

So if you don't lay out all 5000 elements on font resize, how do you know your precise scroll position?

[@llothar68]

You don't and you don't really need. You estimate and then you do update the size when measuring later. I'm on desktop and there it works well with background threads.

[@MCasterAnd]

You scroll to the element that was first visible in the viewport?

[@YTSliv]

It's done on initial render once possibly offscreen, and onwards only show in-viewport content. So realistically you do not want any of those children and relayout the entire thing.

[@joelmackenzie]

Looks like this has been cancelled. :( What should I use instead?

[@derstreber2]

I wonder if his clicker is powered by JavaScript.

[@sitcomrave]

Where are the links for repo and examples ?

[@pikaxDev]

github.com/valdrinkoshi/virtual-scroller

[@omri9325]

Does it affect SEO?

[@rickcode22]

Is this virtual scroller can work to the entire page? because with react-window it generates a second scroll on the list that I'm working on

[@samuelgrahame3617]

Best way to do it. Keep all content in Javascript. Render the elements usin Javascript. Calculate the height based on how many lines in the content. You could then ad a absulute 1x1 element at the bottom of the screen where n x row height avg

Is this proposal dead?

[@Textras]

Game changer but this has been a very long time coming. Long overdue. Please, prioritized and accelerated this.

[@augmentos]

Confused. At 11:50 he shows a great example, but then says never do it this way

[@hohpark]

Great information! We can consider these ideas into our virtual list component and hope to support these feature by chromium soon (so that we can remove lots of js logics to handle virtual)

[@radulaski]

So what is the status of in 2021?

[@BenjaminAster]

It has been cancelled and doesn't exist... :(

[@kzakaria91]

creed?

[@slothymcgee6388]

that contour line looks sweet inverted is it all one path?

[@pridetinuotrauka8822]

So where's the scrollbar in the scroller? How users going to know, that that content is scollable? And will it be able to show the scrollbar bar positioned correctly?

[@samuelgrahame3617]

You add a 1x1 absolute div at the bottom right had side of the height of all the content.

[@corynorell3686]

Can someone briefly explain how he implemented the 'jank indicator' that makes the screen flash red, or point me towards documentation? Seems really useful.

[@daspkicks]

Here you go: developer.chrome.com/devtools/docs/rendering-settings

[@SebastiaanDeckers]

Proposed standards should be namespaced by draft, version, vendor, etc. Is this actually released under "std:virtual-scroller" or is that just a demo of what it could eventually look like?

[@octubre_lilaka]

Imagine implementing a element with this where it takes the return value of a react.createElement tree and renders it to itself instead of using react-dom's render function to render into the body

[@cyb]

If i implement this today can I just use a display none or visibility hidden outside the viewport?

[@filemot25]

display: none might help with the rendering. But I would expect the amount of DOM nodes affect the performance regardless of visibility.

[@TesterAnimal1]

You can’t use use display:none on what’s scrolled off the top. Unless the “row” elements are absolutely positioned. Otherwise the still visible rows will move up. It’s not that easy a problem to solve.

[@yandodov]

I think many people misunderstand how this would work. I don't think it would avoid laying out elements off the viewport. It would simply hide them in the manner of `visibility: hidden` where they are still part of the page, they are still part of the block formatting context, it's just that they can't be seen. So I'm guessing that invisible DOM would so something similar, but take it one step further. And `` would simply be the tool that makes DOM nodes invisible based on their location.

[@samuelgrahame3617]

They have both types. Invisible or removed.

[@samuelgrahame3617]

Virtual scrolling is how every other grids on any other platform works.

[@阴小海]

What happend ?

[@Donaldo]

Nothing new here. Old database-oriented gui toolkits did this in this 90s. Jquery and others implemented it. My problem is that the web doesn't make this *kind* of problem approachable. Replace "scroller" with something else and you have the same basic limitations of a traditional retained mode GUI. Now we get a lot of benefits out of retained mode (easy ctrl+f, accessibility technologies, web crawlers, declarative markup, and others) but we still aren't seeing anything really new that would simplify this class of problems. Most web devs don't even know what retained mode or immediate mode are. People were quick to ask, "what about control f?" But control f with invisible DOM doesn't scale either: you ultimately run out of some resource in your front-end. A new paradigm might be able to solve these problems instead of requiring us to solve individual instances of these problems over and over again.

[@justfly1984]

That looks like extra http request to get this functionality, and you need to import virtual scroller before the , which is not good at all, and html-components... Although Invisible DOM looks nice.

[@naythaniel]

Mind blown

[@B1FREQUENCY]

Establishing CyberSpace and How Enterprise inc. & U.S. Government Agencies intends To MONETIZE. Great Video and I love all the content your providing.

[@B1FREQUENCY]

What does the Flash & Red Screen affect the Retinas and therefore is there a current case study of blanking and Retina Fatigue & Psychologically?

Hello World!

[@robertkaminski1781]

content-visiblity: "auto" and virtual scroll is not necessary