title: AngularJS performance with many directives
body: <p>I'm using AngularJS 1.0.8.</p>
  
  <p>The problem: I have a dynamic website that can be built from various components, or widgets: paragraphs, text blocks, images, hyperlinks, and tables, for that matter.
  A paragraph is a container of more components. A table is also a kind of a container - it can hold other components, and it arranges them as a datagrid.</p>
  
  <p>The website is not static, i.e. I don't have a pre-defined layout of such components.
  Instead, I get a JSON in startup, that specifies the layout of the components.</p>
  
  <p>Originally, I had a directive of each such component, using templates for that directives, and occasionally using $compile to change the DOM a bit for more complex components.
  For the 'container' components - paragraphs and tables - I used ngRepeat to render all of the components that are contained in that container-component.</p>
  
  <p>That was problematic performance-wise. It would take the website many seconds to load on Chrome/Firefox, with the time spent mainly in the AngularJS render mechanism (not in IO, I figured).</p>
  
  <p>So I decided to change the directives of these components. Instead of using ngRepeat, which is not really necessary since I don't need the two-way binding (the content in the website is not interactive and cannot be changed, so really I only need to render it once, very much like a servlet) - I built the HTML string in the directive myself, using plain JS, iterating over all of the contained components that exist in the model, and at the end I $compiled and linked it.</p>
  
  <p>The result wasn't good enough again.
  For a table of a few hundered cells, it took ~500 milis to link in modern Chrome/Firefox, and ~4000 milis in IE9, and ~15000 milis in IE8, and IE7 is still rendering so I can't give you the time :)</p>
  
  <p>I thought that the problem might be with an extensive use of directives.<br>
  A simple:<br></p>
  
  <pre><code>&lt;div my-table-component data="data"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>element would result, after the link, in a <code>&lt;table&gt;</code> tag with 30-40 <code>&lt;tr&gt;</code> tags, each with 10 <code>&lt;td&gt;</code> tags, and in each there would be an additional <code>&lt;div my-text-component&gt;</code> or <code>&lt;div my-image-component&gt;</code> that would then have to be compiled and linked by itself (since it has a directive).</p>
  
  <p>I though that since my website is not interactive to begin with, I don't really need this.
  Maybe I could avoid using directives for each component, and leave only a directive for the container-components. In these directives, I would create the actual HTML template of every possible other component, instead of using directives that would do that.</p>
  
  <p>That takes me another step away from the AngularJS idea towards a servlet idea. And it kind of sucks.
  So maybe one of you can offer a better approach for me... Maybe the performance problem is not even there? Maybe a use of directives (and hopefully ngRepeat) can be fine performance-wise even with this amount of items? Maybe there's a better way to make an insightful performance benchmark, other than using Chrome's Developer Tools, Firebug, and Chrome's Batarang AngularJS extension (none of them really directed me in a productive way).</p>