ng_renderPerformanceTest

ng Render DOM Performance Testing Demo.

by Ryan Hsu

HTML

<div ng-app="demoapp">
  <div ng-controller="demoCtrl">
    <h1>Performance Test</h1>
    <h2>跑1000筆資料，Render畫面時間</h2>
    <h3>Angular效能測試</h3>
    <input type='button' value='開始' ng-click='angulartest()' /> 花費時間：{{runtime || 0}}
    <li ng-repeat='item in items'>{{item}}{{caculateRuntime($last)}}</li>
  </div>
</div>

JavaScript

//宣告ng-app，並在app中掛載官方的ngMessage模組
var demoApp = angular.module("demoapp", []);

//ng-app底下掛載ng-controller
demoApp.controller("demoCtrl", function($scope) {
  var starttime;
  $scope.caculateRuntime = function(last) {
    //當最後一筆，且有開始時間才進入
    if (last && starttime) {
      $scope.runtime = (new Date() - starttime) + "ms";
      starttime = null;
    }
    return '';
  };

  $scope.angulartest = function() {
    var data = [];
    for (i = 0; i < 1000; i++) {
      data.push(i);
    }
    //放在這邊
    starttime = new Date();
    $scope.items = data;
  }
});