I am using AngularJS 1.0.8.
Problem: I have a dynamic website that can be created from various components or widgets: paragraphs, text blocks, images, hyperlinks and tables, for that matter. A paragraph is a container with many components. A table is also a kind of container - it can contain other components, and it organizes them as a datagrid.
The website is not static, i.e. I do not have a predefined location for such components. Instead, I run JSON at startup, which determines the layout of the components.
Initially, I had a directive for each such component, using templates for these directives and sometimes using the $ compilation to slightly modify the DOM for more complex components. For the “container” components - paragraphs and tables - I used ngRepeat to render all the components that are contained in this container component.
That was problematic. A website would take many seconds to load in Chrome / Firefox, with the time spent mainly on the AngularJS rendering engine (not in IO, I figured).
So I decided to change the directives of these components. Instead of using ngRepeat, which is not really necessary, since I do not need two-way binding (the content on the website is not interactive and cannot be changed, so I really only need to display it once, very similar to a servlet) - I I myself built the HTML string in the directive using simple JS, iterating over all the components contained in it that exist in the model, and at the end I $ compiled and linked it.
The result was again not good enough. For a table of several articulated cells, it took ~ 500 miles to communicate in modern Chrome / Firefox browsers and ~ 4000 miles in IE9 and ~ 15000 miles in IE8, and IE7 is still displayed, so I can not give you time :)
I thought the problem could be the widespread use of directives.
Plain:
<div my-table-component data="data"></div>
Element
will result in after the link in the <table> tag with 30-40 <tr> tags, each with 10 <td> tags, and in each of them an additional <div my-text-component> or <div my-image-component> will be added <div my-image-component> , which then needs to be compiled and linked on its own (since it has a directive).
Although, since my site is not interactive for starters, I really don't need it. Perhaps I could avoid using directives for each component and leave only the directive for component containers. In these directives, I would create the actual HTML template of all the possible other components, instead of using the directives that will do this.
This is another step from the idea of AngularJS to the idea of servlets. And that sucks. So maybe one of you can offer me a better approach ... Maybe the performance problem doesn't even exist? Maybe using directives (and hopefully ngRepeat) can be excellent in performance even with this number of items? Maybe there is a better way to make an insightful performance metric, except using the Chrome Developer Tools, Firebug and Chrome Batarang AngularJS tools (none of them really gave me an efficient way).