Hi David, I like your question :)
> The current trend of designing an angular application is to create small > reusable components. > This approach naturally makes the dom hierarchy deeper. > Euhm, This is totally depended on how you are writing your components. If you take good care, and design your components well, you might even reduce the depth of the resulting DOM. However, I agree, most components you see out in the wild, will deepen the dom with at least 1(unneeded!) level. > One of the suggestions about css reflow was to reduce unneccesary dom > depth: > https://developers.google.com/speed/articles/reflow > The key operative in this sentence is 'unneccesary'. It is highly debatable what that is. The component way brings you a lot, but as always there is a cost. (note, not stating that an extra DOM level is the cost!) > Aren't these two attitudes contrary? > Yes they are. > What is the real performance hit when deepening the dom hierarchy? > Ah, and here you hit the exact culprit of the entire story. Deepening the DOM with 1 level? I don't think you can even measure the performance impact. Adding a few 100 levels? Probably your page will be very janky(which is different from unusable!). However, is that a real issue for you application? In most cases, not really. In some cases it is a big problem. (usually there is only a issue if your app needs to be sold, and your competition has way less jank ;)) If you are writing an consumer facing app, it's a bigger problem as when you are writing business apps. The only way to know for sure, is test in your situation. On average I would say that components are well worth the costs. If you design your components well, and don't mess with the things that causes extra reflows, the point is moot anyway. Reflows are a real issue, with or without components. And often reflows can be prohibited by taking them in account when building your app. If you do that, components will not be reason of jank. Regards Sander -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
