3

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.

Improve this question
4
  • While this is not a formal answer at all, we recently went in the opposite direction and moved some parts of our application from HTML inside <aura:iteration /> tags to reusable lightning components inside the iterations. We did not notice any significant performance difference once using the lightning components. Do note that these components have no interaction with APEX which may have a big impact on performance and we see pretty wild differences in load times throughout the day even with the same code loading each time. Commented Oct 29, 2016 at 2:15
  • I don't have experienced major perfs issues with aura:iteriation, but I'm kind of scared by seing that u pass jQuery and secureWindow as component parameters ... what is it for ? Commented Oct 29, 2016 at 9:45
  • @Nicolas Vuillamy, the purpose for that is to use jQuery functions like slide toggle and window Javascript functions inside of the component Commented Oct 29, 2016 at 14:52
  • You mean u send the secureWindow to a child component, to update the parent component DOM from the child component methods using JQuery ? If yes, i'm not sure it's safe, the DOM of a component must be updated only from renderer of the current component, not other components Commented Oct 29, 2016 at 15:33

1 Answer 1

Reset to default
3

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.

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.