Angular bind vs curly brackets {{}}
JavaScript performance comparison
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.
Test | Ops/sec | |
---|---|---|
Brackets
|
|
pending… |
Bind
|
|
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.
- Revision 1: published
- Revision 3: published
- Revision 4: published
- Revision 5: published
- Revision 6: published
- Revision 7: published
- Revision 8: published
- Revision 10: published
- Revision 12: published
- Revision 13: published
- Revision 14: published
- Revision 15: published
- Revision 16: published
- Revision 17: published
- Revision 18: published
- Revision 19: published
- Revision 20: published Eugenio
- Revision 21: published Eugenio
- Revision 22: published
- Revision 23: published
- Revision 24: published
- Revision 25: published
- Revision 26: published
- Revision 27: published Angular 1.3.2
- Revision 28: published Angular 1.3.2
- Revision 30: published Dan Mindru
- Revision 31: published konsti
- Revision 32: published konsti
- Revision 33: published
- Revision 34: published
- Revision 35: published
- Revision 36: published
- Revision 37: published
- Revision 38: published
- Revision 40: published
- Revision 42: published
- Revision 43: published ilia
- Revision 44: published
- Revision 46: published David
- Revision 47: published David
- Revision 48: published David
- Revision 49: published David
- Revision 50: published David
- Revision 58: published
- Revision 59: published
- Revision 60: published and last updated
- Revision 61: published
- Revision 62: published
- Revision 63: published
- Revision 64: published
- Revision 65: published
- Revision 66: published
- Revision 67: published
- Revision 68: published Ben
- Revision 70: published Siddhant
- Revision 71: published
- Revision 72: published
- Revision 73: published
- Revision 77: published
- Revision 78: published
- Revision 79: published
- Revision 80: published
- Revision 81: published
- Revision 82: published
- Revision 83: published
- Revision 84: published
- Revision 85: published
- Revision 86: published
- Revision 87: published
- Revision 88: published Mark
- Revision 89: published
- Revision 90: published Abhishek Goel
- Revision 91: published
- Revision 93: published
- Revision 94: published
- Revision 95: published
- Revision 96: published
- Revision 97: published
- Revision 98: published Spark
- Revision 99: published Harry
- Revision 100: published
- Revision 101: published
- Revision 102: published
- Revision 103: published
- Revision 104: published
- Revision 105: published
- Revision 106: published
- Revision 107: published Valter Kraemer
- Revision 108: published
- Revision 109: published Rob Walker
- Revision 111: published
- Revision 112: published
- Revision 113: published dogself
- Revision 114: published poop
- Revision 115: published poop
- Revision 117: published
- Revision 118: published
- Revision 119: published
- Revision 121: published
- Revision 122: published marcelo
- Revision 123: published Yago
- Revision 124: published Yago
- Revision 125: published
- Revision 126: published
- Revision 127: published
- Revision 129: published jon
- Revision 130: published
- Revision 131: published Tom McKearney
- Revision 132: published Tom McKearney
0 Comments