Example for Stackoverflow. Compare render large amount of data

by S_YOU

HTML

<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script src="https://rawgit.com/S-YOU/doTA/master/dist/ngDoTA.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController as vm">
    <input id="countRow" ng-model="vm.countRow">
    <div> Generate angular: 100k records - 7 sec on script, 7 second on render
      <br>
      <input type="button" ng-click="vm.startGenerateAngular()" value="Go">
    </div>
    <div> Generate jQuery: 100k records - 8 sec on script, 6 second on render
      <br>
      <input type="button" onclick="startGenerateJQuery()" value="Go">
    </div>
    <div> Generate Native: 100k records - 0.3 sec on script, 6 second on render
      <br>
      <input type="button" onclick="startGenerateNative()" value="Go">
    </div>
    <div> Generate doTA: 100k records
      <br>
      <input type="button" ng-click="vm.startGenerateDoTA()" value="Go">
    </div>
    <div ng-repeat="item in vm.arrayAngular">
      <div>{{::item}}</div>
    </div>
    <div id="contentJQuery">
    </div>
    <div id="contentNative">
    </div>
    <div ng-if="vm.arrayDoTA">
      <div render=1 inline=1>
         <div ng-repeat="item in vm.arrayDoTA">{{item}}</div>
      </div>
    </div>
  </div>
</div>

CSS

.error {
  color: red;
  font-style: italic;
}

JavaScript

angular.module('ExampleApp', ['doTA'])
  .controller('ExampleController', function() {
    var vm = this;
    vm.countRow = 100000;
 
    vm.arrayAngular = [];
    vm.startGenerateAngular = function() {
      vm.arrayAngular = [];
      for (var i = 0; i < vm.countRow; i++) {
        vm.arrayAngular.push(i);
      }
    }
    
    vm.startGenerateDoTA = function() {
      vm.arrayDoTA = [];
      for (var i = 0; i < vm.countRow; i++) {
        vm.arrayDoTA.push(i);
      }
    }
  });

function startGenerateJQuery() {
  var count = $("#countRow").val() * 1;
  var $content = $("#contentJQuery");
  $content.html("");
  for (var i = 0; i < count; i++) {
    var divParent = $('<div>');
    var divChild = $('<div>');
    divChild.text(i);
    divParent.append(divChild);
    $content.append(divParent);
  }
}

function startGenerateNative() {
  var count = $("#countRow").val() * 1;
  var content = document.querySelector("#contentNative");
  content.innerHTML = "";
  for (var i = 0; i < count; i++) {
    var divParent = document.createElement('div');
    var divChild = document.createElement('div');
    divChild.innerText = i;
    divParent.appendChild(divChild);
    content.appendChild(divParent);
  }
}