List virtualization (also called Windowing) is a front-end performance optimization technique that renders only the visible list items in the viewport, rather than all items in the list. The benefit of a virtualized list is the reduced amount of DOM nodes to render, yielding faster load time and less memory used.
I came across this book Advanced React by Nadia Makarevich one day and decided to give it a try. It turns out to be such a wonderful read! This book is informative and contains lots of code examples to help wrap your head around complex ideas. I decided to write down some reading notes for future references.
Caching plays a crucial role in optimizing performance. By setting cache control headers for your resources, you can define specific caching policies for browsers to follow. Effective caching eliminates the need for browsers to re-fetch resources that are not modified, reducing bandwidth usage and improving load speed.
.k6QaURQM_1ssCEB.webp)
Images often have large file sizes, which can significantly impact performance and consume more resources. In this section we will introduce common techniques for handling images with performance in mind.
Fonts are often large and take a while to load. Some browsers hide text until the intended font is downloaded, which could potentially delay First Contentful Print (FCP). Font swapping also poses potential layout shifts when the fallback font and the downlaoded font take up difference space, which affects Cumulative Layout Shift (CLS).