Rendering large logs in a browser can be a complex task if you want a rich UI including coloring, grouping, search, and permalinks, says GitHub engineer Alberto Gimeno. This is why after testing with both a React and plain JS library, they opted to build their own.

The main design decision GitHub engineers had to make was opting for virtualization. Without virtualization, Gimeno explains, the risk was too high that the UI could become sluggish or unresponsive. Virtualization is possible at two different levels: data virtualization and UI virtualization.

UI virtualization consists in displaying only a subset of all the entries belonging to the log and updating the view as the user scrolls through the page. Data virtualization is a more complex approach where the browser has only a portion of the data available at any time and fetches the rest on demand.

#javascript #performance #react