Javascript apps and rendering big lists

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>