Grokking the Mobile System Design Interview/

...

/

Virtualization for Performance Optimization in Mobile

Virtualization for Performance Optimization in Mobile

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

We'll cover the following...

Let’s say you’re developing a mobile app with a long scrollable feed; maybe a social media timeline, a product list, or a chat thread. Your back-end team delivers paginated data, your UI looks polished, and everything works great with a few items. Then your test data grows, from hundreds of items to thousands.

Suddenly, things fall apart.

  • Scrolling becomes jittery.

  • The app freezes for a moment before new content appears.

  • Memory usage spikes and some older phones crash outright.

  • Your smooth, snappy interface now feels clunky and broken.

All this, even before you’ve done anything particularly “heavy.” The problem? You’re asking the device to do more than it needs: more layout, rendering, and memory allocation. The system struggles not because the device is weak, but because the app is wasteful.

Let’s understand what we mean by over rendering and over-memory allocation with a real-world example.

Rendering product data

Data in its raw form isn’t very exciting. It might be a giant string, a JSON blob, or an API response filled with fields and nested objects. By itself, it doesn’t offer much value to users. To make it useful, we transform this data into visual interfaces. We pair it with layout structures, styles, and interaction logic to create engaging experiences.

Here’s an example of such raw data, a JSON response for product listings:

Press + to interact
{
  "ItemResults": {
    "Items": [
      {
        "ASIN": "B0199980K4",
        "ItemInfo": {
          "Title": { "DisplayValue": "Genghis: The Legend of the Ten" }
        },
        "Offers": {
          "Summaries": [
            { "HighestPrice": { "Amount": 11.99, "Currency": "USD" } }
          ]
        }
      },
      { ... more items ... }
    ]
  }
}

We parse this data and render it visually using UI frameworks. In web apps, that might mean generating HTML elements; in mobile apps, it’s view hierarchies managed by components like RecyclerView or UITableView.

Each product in this dataset translates into a view in the user interface, a card, a row, or a tile with an image, title, price, and actions. This is fine for a few products. But what if the user scrolls through hundreds or thousands of products? In a naive implementation, every product is turned into a UI element and added to the view hierarchy (or DOM in a web context), as illustrated below:

Press + to interact
An example of rendering all the products
An example of rendering all the products

Every element takes up:

  • Memory holding onto objects, bitmaps, layouts, etc.

  • Rendering resources triggering layout passes, draw calls, and GPU compositing.

  • Life-cycle management overhead keeps views alive even when they’re offscreen.

This leads to what developers call a “UI explosion” or “DOM explosion”; the system becomes overwhelmed by too many views at once.

While this problem is well-known in web development (DOM size affects browser rendering), the same principle applies in mobile System Design, but with even tighter resource limits.

In mobile design, over rendering eats memory, drains battery, and breaks the illusion of speed that users expect.

So, how do mature apps like Instagram, WhatsApp, or Amazon handle huge amounts of content while staying fast? They don’t render everything, and they don’t even try.

They and other giant apps use a performance technique called virtualization. Let’s explore what that is.

What is virtualization?

Now that we’ve seen the problem of over rendering, wasted resources, and performance bottlenecks, it’s time to look at the solution. Virtualization ...