githubmirror/angular.js

benchmarks/repeat-animate-bp/main.html
70 строк3 KB
Martin Staffa
chore(benchpress): add ngRepeat animation benchmark
06 сен 2018, 16:46
06 сен 2018, 16:461dcba9c
<div ng-app="repeatAnimateBenchmark" ng-cloak>
  <div ng-controller="DataController">
    <div class="container-fluid">
      <p>
        Tests rendering of an ngRepeat with 500 elements.<br>
        Animations can be enabled / disabled in different ways.<br>
        Two tests require reloading the app with different module / app configurations.
      </p>

      <div><label><input type="radio" ng-model="benchmarkType" value="none">none: </label></div>
      <div><label><input type="radio" ng-model="benchmarkType" value="baseline">baseline (vanilla Javascript): </label></div>
      <div><label><input type="radio" ng-model="benchmarkType" ng-disabled="fileType !== 'default'" value="enabled">enabled : </label> (requires <a href="./">app.js</a>)</div>
      <div><label><input type="radio" ng-model="benchmarkType" ng-disabled="fileType !== 'default' && fileType !== 'classfilter'" value="globallyDisabled">globally disabled:</label> (requires <a href="./">app.js</a> or <a href="?app=app-classfilter.js">app-classfilter.js</a>)</div>
      <div><label><input type="radio" ng-model="benchmarkType" ng-disabled="fileType !== 'default'" value="disabledParentElement">disabled by $animate.enabled() on parent element: </label> (requires <a href="./">app.js</a>)</div>
      <div><label><input type="radio" ng-model="benchmarkType" ng-disabled="fileType !== 'noanimate'" value="noanimate">Without ngAnimate:</label> (requires <a href="?app=app-noanimate.js">app-noanimate.js</a>)</div>
      <div><label><input type="radio" ng-model="benchmarkType" ng-disabled="fileType !== 'classfilter'" value="disabledClassFilter">disabled by classNameFilter on element:</label> (requires <a href="?app=app-classfilter.js">app-classfilter.js</a>)</div>

      <ng-switch on="benchmarkType">
        <baseline ng-switch-when="baseline">
        </baseline>
        <div ng-switch-when="noanimate">
          <div noop>
            <div ng-repeat="row in data">
              <span ng-repeat="column in row">
                <span>{{column.i}}</span>
              </span>
            </div>
          </div>
        </div>
        <div ng-switch-when="enabled">
          <div noop>
            <div ng-repeat="row in data">
              <span ng-repeat="column in row">
                <span>{{column.i}}</span>
              </span>
            </div>
          </div>
        </div>
        <div ng-switch-when="globallyDisabled">
          <div noop>
            <div ng-repeat="row in data">
              <span ng-repeat="column in row">
                <span>{{column.i}}</span>
              </span>
            </div>
          </div>
        </div>
        <div ng-switch-when="disabledClassFilter">
          <div noop>
            <div ng-repeat="row in data">
              <span class="disable-animations" ng-repeat="column in row">
                <span>{{column.i}}</span>
              </span>
            </div>
          </div>
        </div>
        <div ng-switch-when="disabledParentElement">
          <div disable-animations>
            <div ng-repeat="row in data">
              <span ng-repeat="column in row">
                <span>{{column.i}}</span>
              </span>
            </div>
          </div>
        </div>
      </ng-switch>

    </div>
  </div>
</div>