In the last article we created a card grid with the angular material scrolling help. Although the result was as expected, things began to get complicated.
Requirements:
- Minimal knowledge of angularJs and Angular is expected, including javascript and typescript.
Sponsors:
- This article has been created thanks to Anura's support.
When Things Go Wrong
Some of the texts that were shown inside the cards were too long, so we had to hide the excess text so as not to affect the design. Therefore, we add material tooltips to all the card internal elements to communicate the hidden content to the user. However, things went wrong.
Suddenly, the scrolling experience was affected. When we analyzed the problem with the chrome dev tools (DevTools > More tools > Performance monitor), we found that we had 100% CPU usage. What happened? We had only added a few simple tooltips?!
The reason behind this problem was that the material tooltips have a few set of animations in their behavior and as you should know, quoting the Google team:
Animating properties is not free, and some properties are cheaper to animate than others. For example, animating the width and height of an element changes its geometry and may cause other elements on the page to move or change size. This process is called layout (or reflow in Gecko-based browsers like Firefox), and can be expensive if your page has a lot of elements. Whenever layout is triggered, the page or part of it will normally need to be painted, which is typically even more expensive than the layout operation itself.
There is nothing wrong with the Angular Material Tooltips. Only that Angular was not expecting us to use them on 5 to 10 elements inside card ... inside grid of cards ... inside virtual scroll.
One of the possible solutions would have been to cancel all the tooltip animation styles. However, because that could cause an overload in css processing work, it was preferred to create a simple tooltip without animations.
Conclusion:
To avoid receiving complaints from your customers, whenever you add some changes, always remember to compare the performance before and after those changes. It's a small step for a dev, and a giant leap to become a great professional.
Top comments (0)