I am currently building a somewhat complex Lightning App page. I have currently encountered a requirement to optimize the page due to slowness in the page loading and filtering records using client-side interactions. During my analysis, I noticed that in several places throughout the app, we have Lightning components inside of <aura:iteration>
tags. I haven't seeing this anywhere in the documentation, but could it result in performance degradation to include Lightning components in the aura:iteration
tag?
Also, is there a document available anywhere outlining the best practices for optimal performance in cases like this when building apps with Lightning?
I have attached a screenshot of one code block where we have multiple components in an iteration.
Thank you for any help you can provide.
Best Answer
I have experienced similar problem. Yes, if we render components inside aura:iteration it does lead to performance problem if the components are too many/or are complex. From what I have read-and not from any documentation concretely-the reason is probably due to multiple factors like:
-
aura:if
tag in the component that is rendered inside iteration-Another
aura:iteration
inside the component that is rendered inside iteration.-Too many events (application events specially as they are expensive). You should use
aura:method
for calling methods of child components.-If an attribute is set multiple times inside some loop.
Though removing these factors should improve performance, in my case, I only handled the case of too many events and removing
aura:if
tags which at least helped me get rid of the warning that performance was degrading and improved the performance gradually.