Grokking the Frontend System Design Interview/

...

/

Virtualization for Optimizing Performance

Virtualization for Optimizing Performance

Learn to optimize data rendering and performance of frontend applications using virtualization.

We'll cover the following...

Data in its raw form isn’t very exciting. It could be a giant string or a blob of JSON that doesn’t offer much value until it’s presented visually to users. To make it useful, we pair this data with HTML, CSS, and JavaScript to create dynamic interfaces like lists of movies, photo galleries, product catalogs, and social media feeds.

A sample JSON data containing a list of products is shown below. The illustration with the caption “An example of DOM rendering all the products at once” provides a sample visual representation of this data.

Press + to interact
Products 
 {
    {
  "Errors": [
    {
      "__type": "com.amazon.paapi#ErrorData",
      "Code": "ItemNotAccessible",
      "Message": "The ItemId B01180YUXS is not accessible through the Product Advertising API."
    }
  ],
  "ItemResults": {
    "Items": [
      {
        "ASIN": "B0199980K4",
        "DetailPageURL": "https://www.amazon.com/dp/B0199980K4?tag=xyz-20&linkCode=ogi&language=en_US&th=1&psc=1",
        "Images": {
          "Primary": {
            "Small": {
              "Height": 75,
              "URL": "https://m.media-amazon.com/images/I/61s4tTAizUL._SL75_.jpg",
              "Width": 56
            }
          }
        },
        "ItemInfo": {
          "Title": {
            "DisplayValue": "Genghis: The Legend of the Ten",
            "Label": "Title",
            "Locale": "en_US"
          }
        },
        "Offers": {
          "Summaries": [
            {
              "Condition": {
                "DisplayValue": "nuevo",
                "Label": "Condición",
                "Locale": "es_US",
                "Value": "New"
              },
              "HighestPrice": {
                "Amount": 11.99,
                "Currency": "USD",
                "DisplayAmount": "$11.99"
              }
            }
          ]
        },
        "ParentASIN": "B07QGKM68X"
      },
      {
        "ASIN": "B00BKQTA4A",
        "DetailPageURL": "https://www.amazon.com/dp/B00BKQTA4A?tag=xyz-20&linkCode=ogi&language=en_US&th=1&psc=1",
        "Images": {
          "Primary": {
            "Small": {
              "Height": 75,
              "URL": "https://m.media-amazon.com/images/I/41OiLOcQVJL._SL75_.jpg",
              "Width": 46
            }
          }
        },
        "ItemInfo": {
          "Features": {
            "DisplayValues": [
              "Round watch featuring logoed white dial with stick indices",
              "36 mm stainless steel case with mineral dial window",
              "Quartz movement with analog display",
              "Leather calfskin band with buckle closure",
              "Water resistant to 30 m (99 ft): In general, withstands splashes or brief immersion in water, but not suitable for swimming"
            ],
            "Label": "Features",
            "Locale": "en_US"
          },
          "Title": {
            "DisplayValue": "Daniel Wellington Women's 0608DW Sheffield Stainless Steel Watch",
            "Label": "Title",
            "Locale": "en_US"
          }
        },
        "Offers": {
          "Summaries": [
            {
              "Condition": {
                "DisplayValue": "nuevo",
                "Label": "Condición",
                "Locale": "es_US",
                "Value": "New"
              },
              "HighestPrice": {
                "Amount": 199,
                "Currency": "USD",
                "DisplayAmount": "$199.00"
              }
            }
          ]
        },
        "ParentASIN": "B07L5N7P32"
      },
      {
        "ASIN": "B000HZD168",
        "DetailPageURL": "https://www.amazon.com/dp/B000HZD168?tag=xyz-20&linkCode=ogi&language=en_US&th=1&psc=1",
        "Images": {
          "Primary": {
            "Small": {
              "Height": 75,
              "URL": "https://m.media-amazon.com/images/I/61ZRPpZoBvL._SL75_.jpg",
              "Width": 56
            }
          }
        },
        "ItemInfo": {
          "Title": {
            "DisplayValue": "Star Trek II: The Wrath of Khan",
            "Label": "Title",
            "Locale": "en_US"
          }
        },
        "Offers": {
          "Summaries": [
            {
              "Condition": {
                "DisplayValue": "nuevo",
                "Label": "Condición",
                "Locale": "es_US",
                "Value": "New"
              },
              "HighestPrice": {
                "Amount": 9.99,
                "Currency": "USD",
                "DisplayAmount": "$9.99"
              }
            }
          ]
        },
        "ParentASIN": "B07G9PHJJH"
      }
    ]
  }
}
}

But here’s where the challenge begins. The larger the dataset we need to display, the more HTML elements we add to the DOM. This results in what’s known as a DOM explosion. Each element in the DOM consumes memory and requires the browser to perform expensive tasks like rendering, layout recalculations, and executing JavaScript. The larger the DOM, the slower our pages load and the more sluggish they become during interactions, as shown below:

Press + to interact
An example of DOM rendering all the products at once
An example of DOM rendering all the products at once

We can encounter the following challenges:

  • High memory usage: Large DOM trees require more memory to store elements and their properties.

  • Slower initial load: Loading numerous DOM elements upfront significantly increases page load times.

  • Decreased responsiveness: Frequent reflows and repaints due to dynamic updates cause UI lag and stuttering.

This is problematic, especially for applications handling large datasets, such as infinite scrolling lists or data-intensive grids.

Question: How can we efficiently display large datasets without overwhelming the browser?

The answer is virtualization, also known as frontend or UI virtualization.

This lesson covers virtualization as a performance optimization technique in frontend System Design. We explore how virtualization pools and resource recycling help improve memory usage, reduce rendering time, and create scalable applications. ...