Case Study Overview

The Log Management application displays various fieldsets, allowing users to click on a row to view detailed ECS field data presented as a chips list.

> "Elastic Common Schema (ECS) defines a common set of fields for ingesting data into Elasticsearch." — elastic.co

Upon selecting a field, the first ECS field is highlighted for easy access to its attributes. Users can also toggle to view all fields of a fieldset. However, it takes around 4 seconds to load the details of 12 fields, prompting us to investigate further with DevTools.

Analyzing Performance with DevTools

To begin troubleshooting, access the Performance Monitor in DevTools to gather insights on various performance metrics, including CPU usage and DOM nodes.

Here's a snapshot of the rendering costs associated with displaying all ECS fields of the "Destination" fieldset:

We noticed significant spikes in CPU usage, which indicates performance bottlenecks during rendering tasks.

Deep Dive with Performance Timeline Record

Next, we use the Performance Timeline Record to further investigate the rendering tasks. By initiating the recording and simulating user interactions, we can monitor the rendering duration, which was approximately 7 seconds for the browser to complete the task, while scripting took only 2 seconds.

This analysis reveals that the rendering process was a significant contributor to the delay, prompting us to explore the source code for optimization opportunities.

Investigating the Source Code

Within the EcsFieldsetComponent template, we identified two potential DOM structures based on user interactions. The rendering logic needed to be evaluated to enhance performance.

The child component, EcsFieldComponent, contained numerous <mat-form-field> instances, leading to potential performance issues due to the browser's need to render many elements simultaneously.

Solution 1: Implementing matNativeControl

One potential solution from the Angular Material documentation suggested using native elements within <mat-form-field>, which could enhance performance. However, the results were minimal, yielding only a slight improvement.

Solution 2: Introducing Virtual Scrolling

Next, we considered virtual scrolling, which renders only the visible items in the viewport, significantly improving performance. Implementing the cdk-virtual-scroll-viewport allowed us to optimize rendering for the ECS fields efficiently.

This method showcased instant loading of field details, resulting in a much smoother user experience.

Solution 3: Applying Progressive Rendering

As a final approach, we explored progressive rendering using RxJs. This technique emits items gradually, improving responsiveness while managing rendering tasks more effectively.

Though the total rendering time increased, the UI remained responsive, confirming the success of our optimization efforts.

Conclusion

In conclusion, rendering performance plays a vital role in web development and user satisfaction. By employing various techniques such as the Performance Monitor, virtual scrolling, and progressive rendering, we can significantly enhance the performance of Angular applications. A faster, more responsive application keeps users engaged and improves their experience.

If you have questions or need assistance with performance optimization, feel free to reach out!

Interested in More?

I share insights on technology, engineering, and leadership. Join my newsletter for exclusive content or check out my courses on web performance.

Thank you for being part of our community! Don't forget to engage with the content and follow our updates on various platforms.