Session Details

How to Render Twenty Thousand Rows without Crashing Chrome

Regular Session

If you have say twenty thousand rows to render, you probably don’t want to fetch all that data at once and you especially don’t want to render all those rows on page load. This talk is about how to render only the rows you need and how to just-in-time load data for those rows. On the frontend, this means “windowing” or “virtualizing”: only rendering enough rows to fill the view port, with maybe just a few extra. Rendering only the rows you need means less DOM nodes taking up memory and a quicker initial load time. I’ll walk through an example of windowing and demonstrate how to optimize windowing performance. Next, we’ll look at how the client can just-in-time load chunks of row data as new rows scroll into view. I'll discuss how to create server endpoints to support the client-side incremental data fetching. The examples will be using a Node.js server with a React frontend. However the concepts of windowing and just-in-time data loading are applicable to any tech stack.

A software development conference in the Louisville, KY area on August 19 - 21, 2020 designed to cover all aspects of software development regardless of development stack.

Keep in Touch