ng-bind vs {{}} performance

by Jimmy Mabey

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.1/benchmark.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

JavaScript

angular.injector(["ng"]).invoke(function($compile, $rootScope) {
    var scope = $rootScope.$new();
    scope.value = "test";

    var suite = new Benchmark.Suite;
    suite
        .add("ng-bind", function() {
            $compile("<div><span ng-bind='::value'></span></div>")(scope);
        })
        .add("braces", function() {
            $compile("<div>{{ ::value }}</div>")(scope);
        })
        .on('cycle', function(event) {
            document.body.innerHTML += event.target + "<br>";
        })
        .run({
            async: true
        });
});