Recursive tree template rendering slow, non-recursive fast

[Tom]

Hello,

I am curious to understand the performance difference in angular.js between the rendering of a tree in terms of _recursive_ rendering of a node template (slow) and _non-recursive_ rendering (fast). Please have a look at and uncomment either approach

http://plnkr.co/edit/zSO8iTY7IUEQfzt3TKEj

Thanks a lot

.t

 

[Tom]

Hi,

I would still appreciate some explanation of the significant performance difference between the recursive and non-recursive rendering of templates.

Anyone, please?

.t

[Andreas Hulstkamp]

Hi Tom,

 

the recursive approach produces a more complex dom-structure (compare the rendered dom tree of the two approaches to see what I mean)

 

1.) {{node.name}} will get wrapped with a <span> element by ng to conform to valid html

2.) all leaf nodes produce unneeded empty <ul></ul> tags, since the abort condition of the recursion follows within

 

guess, the creation and the rendering of the more complex structure could explain some of the performance difference.

 

Andy

[ganaraj p r]

Also the recursive version is hitting the $templateCache because you are referrring to an ng-include. Basically you have more code executing in the recursive version than in the non-recursive. Your recursive version uses $templateCache ( cache look up cost ) and ng-include ( code execution cost ) while the non-recursive one doesnt.

--
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 angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

--
Regards,
Ganaraj P R

[Tom]

Thank you very much for your answers. Let me add that doing the same thing with knockout.js (explicitly declaring observables as KO requires) the recursive KO version is as fast or faster than the non-recursive angular version. That is a bit disappointing.

.t