Modern day web applications are complex and consume a lot of data. The individual components of a web application – called the Document Object Model, or DOM – quickly add up. Rendering large amounts of DOM elements can also result in slow load times, laggy scrolling, page slowness and other performance issues.
Luckily, developers have a myriad of strategies to overcome these performance issues. At PubMatic, we strive hard to provide our customers with fast and responsive user interfaces. One ways we improve the interface is optimizing the performance of DOM rendering, specifically lazy loading, precooking DOM elements, and virtual scrolling..
Lazy Loading
The most popular strategy for efficient web application performance is lazy loading. Lazy loading means that DOM elements are not loaded all at once, instead, DOM elements are loaded as needed. For example, as a user scrolls through a web page, text and images will load dynamically, on-demand, rather than all at once when the page is initially loaded. This method can greatly improve the user experience of a web app, especially when the application is first loaded. However, as more and more elements are loaded, it can result in a slower, sub-optimal user experience.
Precooking of DOM Elements
Huge gains in efficiency can be made by having elements of a web app ready to be served before the user even requests it. By precooking DOM elements and storing them in a cache, many negative effects of data-heavy client requests can be mitigated.
This will not be the part of the DOM initially, however as users interact with the components, the elements are fetched from the cache and inserted into the DOM. It is very useful when you have multiple heavy data components on a page. At any point, only single expanded component is present in the DOM. Using this technique, DOM has a limited number of nodes, thus precooking prevents the page from getting bulky.
Virtual Scrolling
We strive to use an innovative approach when dealing with the challenges and limitations of UI building. Recently, we implemented virtual scrolling for components that contain large amounts of data. This is especially useful when the user will be dealing with a table or list with hundreds or thousands (or more!) of records. It’s similar to lazy loading, with an additional feature that maintains a constant number of DOM elements by replacing elements rather than simply loading more.
We use Angular 7 as our UI framework which also provides support for virtual scrolling, including scroll event management and DOM element rendering. With Angular 7, we can utilize a fixed size virtual scroll strategy to deal with large lists. This approach allows us to easily render however many list elements we’d like, without limitations.
Despite having a dataset of over 10,000 records, only 13 records are rendered at a time. This helps us keep the DOM lightweight, mitigating slowdown and promoting a better user experience, regardless of the number of records.
For now, virtual scrolling is a feature provided by front-end web framework, such as Angular 7. In the near future, we expect virtual scrolling to become a natively supported feature in modern browsers. To see how the Google Chrome development team is progressing, check the Chrome Status page for the <virtual-scroller> tag.
What’s Next?
Lazy loading, precooking DOM elements, and virtual scrolling are just a few strategies we employ to make our user interface responsive and fast. The result is that our customers and partners can carry out their business easily and efficiently. We will continue to provide innovative and cutting edge technology to make our customer’s lives easier. To learn more about our current projects, or see open positions on our team, check out our recent content and check out our careers page.