Aura:If – A recommended solution to improve Lightning Component Performance.
With this post let’s check how far is this true and what are the boundaries of using aura:if in a component.
- It only loads the markup if the condition is true else the markup is not loaded or destroyed from the DOM.
- Along with unnecessary markup, it also destroys unnecessary listeners associated with the markup.
Above advantages of aura:if can definitely boost your component’s performance with a great margin, especially on lower configuration devices where the browser does not have enough bandwidth to handle a lot of DOM and listeners.
Aura:If is a good solution to get better component performance on the browser side, however, this will fail if you will use too many aura:ifs in your component. That means if you use aura:if within an aura:iteration or any loop, your component may start behaving badly and you may start noticing poor performance. The reasons are unknown to me, however, I think it is due to more calculation happening on the browser level and the time taken to destroy or generate the markup by aura:if.
No, CSS cannot be an alternative in this situation as CSS will always hold the unnecessary markup and listeners which is enough to eat up your browser’s memory.
The use case I have is to generate an HTML table with ~2000 rows.
- Each row is having a condition “Show_Me” which will help in deciding if the row should be visible or not.
- Each row is having 4 different columns to be shown.
- Rendering of the column depends on the data it has within it. For example, Number column should only be rendered if the value is greater than 5.
Let’s see the performance metrics that I have observed while implementing using both approaches.
Approach 1- Using Aura:If
- Time taken to render the page: ~8 sec
- More than 38% of the time is being consumed by aura:if
- Time taken to render the page is ~2.4sec
Approach 1 Code – Using aura:if
Component – AuraIfTesterY.cmp
Controller – AuraIfTesterYController.js
Helper – AuraIfTesterYHelper.js
Component – AuraIfTesterF.cmp
Controller – AuraIfTesterFController.js
Helper – AuraIfTesterFHelper.js
Server Controller (Same for both approach) – AuraIfTester.apxc
Thanks to “Manish Kumar – Managing Director of MTX Technologies” for introducing me to this scenario and explaining it very well.
So from now on, avoid using aura:if inside iterations as this can result in bad performance. Please do share your queries and feedback in comments.