While writing apps with angular.js (which I love) I've come across performance issues when rendering big lists. Like in searchbrew.com.

For example if I do this with 2500 docs. It takes a while to render and slows the page down.
<tr ng-repeat="doc in allDocs">
    <td><a ng-href="{{doc.url}}">{{doc.title}}</a></td>
    <td>{{doc.description}}</td>
</tr>
We can see and measure this performance using chromes flame chart in the javascript cpu profiler.


There are a bunch of angular.js digest cycles and stuff happening. One of the things thats slow is that angular is internally creating a watcher for each of the data bindings in the template.

The data binding and watching is whats great about angular.js but I dont need that here. Alternatively we can use a Mustache template and insert the elements manually with javascript. This performs alot better.

var template = document.getElementById('results-template').text;
var rendered = Mustache.render(template, docs);
$('#results-table').append(rendered);

<script id="results-template" type="text/html">
    <tr>
        <th>Name</th>
        <th>Description</th>
    </tr>
    {{#docs}}
    <tr>
        <td><a href="{{fields.url}}">{{fields.title}}</a></td>
        <td>{{fields.description}}</td>
    </tr>
    {{/docs}}
</script>