Angular bind vs curly brackets {{}}

JavaScript performance comparison

Revision 38 of this test case created by

Preparation code 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<textarea id="template" style="display:none">
<div style="height:200px;overflow:scroll;">
    <div id="app-brackets" ng-controller="controller">
        <table>
                <tr ng-repeat="item in list">
                        <td>{{item.col1}}</td>
                        <td>{{item.col2}}</td>
                        <td>{{item.col3}}</td>
                        <td>{{item.col4}}</td>
                        <td>{{item.col5}}</td>
                        <td>{{item.col6}}</td>
                        <td>{{item.col7}}</td>
                        <td>{{item.col8}}</td>
                        <td>{{item.col9}}</td>
                        <td>{{item.col10}}</td>
                </tr>
        </table>
    </div>

    <div id="app-bind" ng-controller="controller">
        <table>
                <tr ng-repeat="item in list">
                        <td ng-bind="item.col1"></td>
                        <td ng-bind="item.col2"></td>
                        <td ng-bind="item.col3"></td>
                        <td ng-bind="item.col4"></td>
                        <td ng-bind="item.col5"></td>
                        <td ng-bind="item.col6"></td>
                        <td ng-bind="item.col7"></td>
                        <td ng-bind="item.col8"></td>
                        <td ng-bind="item.col9"></td>
                        <td ng-bind="item.col10"></td>
                </tr>
        </table>
    </div>
    </div>
</textarea>

<div id="test"></div>
      

      <script>

        Benchmark.prototype.setup = function() {

          
  document.getElementById("test").innerHTML = document.getElementById("template").value;
  angular.module("app", []).controller("controller", ["$scope",
    function($scope) {
      $scope.list = [];
      for (var i = 0; i < 1000; i++) {
        $scope.list.push({
          col1: i + 1,
          col2: i + 2,
          col3: i + 3,
          col4: i + 4,
          col5: i + 5,
          col6: i + 6,
          col7: i + 7,
          col8: i + 8,
          col9: i + 9,
          col10: i + 10
        });
      }
    }
  ]);

        
  };


      
</script>

Preparation code output

<textarea id="template" style="display:none"> <div style="height:200px;overflow:scroll;"> <div id="app-brackets" ng-controller="controller"> <table> <tr ng-repeat="item in list"> <td>{{item.col1}}</td> <td>{{item.col2}}</td> <td>{{item.col3}}</td> <td>{{item.col4}}</td> <td>{{item.col5}}</td> <td>{{item.col6}}</td> <td>{{item.col7}}</td> <td>{{item.col8}}</td> <td>{{item.col9}}</td> <td>{{item.col10}}</td> </tr> </table> </div> <div id="app-bind" ng-controller="controller"> <table> <tr ng-repeat="item in list"> <td ng-bind="item.col1"></td> <td ng-bind="item.col2"></td> <td ng-bind="item.col3"></td> <td ng-bind="item.col4"></td> <td ng-bind="item.col5"></td> <td ng-bind="item.col6"></td> <td ng-bind="item.col7"></td> <td ng-bind="item.col8"></td> <td ng-bind="item.col9"></td> <td ng-bind="item.col10"></td> </tr> </table> </div> </div> </textarea> <div id="test"></div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Brackets 
angular.bootstrap(document.getElementById("app-brackets"), ["app"])
 pending…
Bind 
angular.bootstrap(document.getElementById("app-bind"), ["app"])
 pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments