Today I Learned - Rocky Kev

TIL Windowing in Browsers

POSTED ON:

TAGS: js performance

TIL about "Windowing".

From the Syntax Podcast, around 7:30 seconds in this episode "Spooky Web Dev Stories 2022".

So you have sites with Infinite Scrolling.

Windowing only allow you to render what's available. Using twitter as a example, with tweets, when you scroll through hundreds of tweets and inspect the DOM, they just put a bunch of blank space above so there's not like 400 tweets above you.

Windowing or List virtualization is a concept of only rendering or write the visible portion in the current “ window ” to the DOM. The number of items that rendered at first time are smaller than the original one.

The remaining items are rendered when you scroll down to it. The DOM nodes of items that exit the window are replaced by the new ones. This improves the performance of rendering a large list.

Without windowing, the entire list is written to the DOM including items that are not in the current window. It means, you would have to wait until the entire list is written to see the first item.

via What is windowing? Also I have heard about react-window and react-virtualized…

NPM: https://www.npmjs.com/package/react-window

Related TILs

Tagged: js

TIL why you should always use textContent

Today I learned the difference between 'Node.textContent'. It handles all elements, even hidden ones. It also prevents XSS attacks since it strips tags.

TIL prepend

When you're creating new elements in Javascript, you want to attach the new element to something that exists in the DOM already. You do that with append, and prepend.

TIL the simulating a Pipe function

It’s a pipe function that allows you to chain multiple operations together by taking a series of functions as arguments and applying them in a specific order to the input.