Sick And Tired Of Fan-Activating Websites? Easy Ways To Improve Web Performance
Learn how to effortlessly manage large datasets in React while maintaining a sleek and responsive user interface through the implementation of windowing techniques.
We all enjoy using sleek and efficient web applications like Twitter, where scrolling through tweets feels effortless and the user interface remains responsive. But have you ever wondered how they achieve this? The secret lies in techniques such as infinite scrolling and windowing. Infinite scrolling detects when the scroll position reaches the bottom of the container and loads more data, reducing loading time by retrieving data in chunks. Windowing, on the other hand, involves only displaying a small portion of the data at a time, further improving performance.
Twitter and Netflix employ the clever technique of windowing to enhance their user experience. On Twitter, a list of tweets is only loaded as you scroll, creating the illusion of an endless feed. Similarly, on Netflix, only the necessary cards are written to the DOM, giving the impression of an infinite carousel in the featured section.
What is Windowing?
Windowing is a powerful optimization technique that involves only rendering the visible portion of a large list in the DOM. This means that the parent element containing the list will only have a fixed number of elements. As the user scrolls, elements are added and removed from the DOM, maintaining a consistent number of child elements.
The window represents the visible section of the list. It’s important to note that windowing does not necessarily replace infinite scrolling. In fact, they can work together to create an even better user experience, as seen on Twitter. Without windowing, an infinite scroll would simply append new elements to the DOM, potentially causing the list to grow infinitely and affecting the smoothness of the user interface.
Efficiently Managing 5000 Records — Proof of Concept with Windowing Technique
I created a proof-of-concept web application that showcases the power of the windowing technique. The app generates a list of 5000 random records, each represented by a card displaying movie information. Despite handling such a vast dataset, the user interface remains smooth, lightweight, and has a minimal memory footprint of 55Mb.
Please take a closer look at the gif below. Notice how the parent element that holds the movie cards maintains a consistent number of child elements as you scroll. This is a result of the windowing implementation in our proof-of-concept. By only writing the visible portion of the list to the DOM, performance is greatly improved. In fact, I measured the performance of the proof-of-concept using a React Profiling Tool both before and after implementing windowing, and the results were truly impressive.
Before implementing windowing, the rendering time was a sluggish 2.4 seconds.
After implementing windowing, the rendering time improved by an impressive 97%, with a total time of only 0.094 seconds.
Deep Dive into Amazon Video Prime UI Poor Performance
I’ve always been intrigued by this UI’s poor performance, particularly because it was developed by Amazon. Scrolling to the bottom of the page causes the user interface to become almost unresponsive, leaving a memory footprint of approximately 310Mb. And attempting to click on a carousel button at this point takes an excessive amount of time to respond.
Warning: Please proceed with caution! Conducting the following experiment may cause strain on your device.
Experiment: Begin by clicking the ‘>’ button on every carousel once. Then, as you scroll down, click the ‘>’ button on each carousel that appears until you reach the bottom of the page.
Keep in mind, this experiment may cause your device to freeze.
There are several factors that contribute to the poor performance of this UI. One major issue is that the carousels do not utilize the windowing technique. When a user clicks the ‘>’ button, all of the carousel cards are loaded into the DOM, even if they are not currently visible. This can quickly add hundreds of elements to the page. Additionally, the carousels are not infinite, making this problem even worse.
Another problem is the implementation of infinite scrolling when scrolling down the page. This only exacerbates the performance issue by allowing more and more data to be loaded into the DOM. Unfortunately, this UI also does not implement windowing when scrolling up and down the page.
In conclusion, understanding techniques like windowing and infinite scrolling can make all the difference in the performance and overall user experience of a website.