Perfomance Directive

Directive to check rendering time

by Maciej Sikora

HTML

<script src="https://cdn.rawgit.com/maciejsikora/Speeder/master/speeder.js"></script>
<content ng-app="app">
<section  ng-controller="test">
     <span ms-perf ms-start='all' ></span>
     <span ms-perf ms-start='repeat1'></span>
     
     <div>
     <span ng-repeat="i in elements">{{i}}</span>
     </div>
     <span ms-perf ms-stop='repeat1' ms-result="repeat1" ms-start='repeat2'></span>
     <hr>
     <div>
     <span ng-repeat="i in elements2">{{i}}</span> 
     </div>
     
     <span ms-perf ms-stop='repeat2' ms-result="repeat2" ms-start='repeat3'></span>
     <hr>
     <div>
     <span ng-repeat="i in elements2"><span ng-show="i%2==0" >{{i}}</span><b ng-show="i%2!=0">{{i}}</b></span> 
     </div>
     
     <span ms-perf ms-stop='repeat3' ></span>
     
     
     <span ms-perf ms-start='repeat4' ms-result="repeat3"></span>
     <hr>
     <div>
     <button ng-repeat="i in elements2">{{i}}</button> 
     </div>
     
     <span ms-perf ms-stop='repeat4' ms-result='repeat4' ></span>
     <hr>
     <span ms-perf ms-stop='all' ms-result='all' ></span>
</section>
</content>

JavaScript

var app=angular.module("app",[]);

//test perfomance
app.controller("test",function($scope,$msPerf){

  $scope.elements=[];
  
  for (var i=0; i<1000; i++)
  $scope.elements.push(i);
  
  $scope.elements2=[];
  
  for (var i=0; i<5000; i++)
  $scope.elements2.push(i);


  //set service to view
  $scope.$msPerf=$msPerf;

});

//service for start,stop and show results
app.service("$msPerf",function(){

  var sp=new Speeder();

	this.start=function(name){
  
  	sp.start(name);
  
  };
  
  this.stop=function(name){
  
  	sp.stop(name);
  
  };
  
  this.result=function(name){
  
  	return sp.result(name);
  
  };


});

//directive which starts stops time checks
app.directive("msPerf",function($msPerf){

		return {
    restrict:"A",
    scope:{
    	msStart:"@",
      msStop:"@",
      msResult:"@"
    },
    link:function(scope,element){
    
    		if (scope.msStart){
        
           $msPerf.start(scope.msStart);
        } 
        
        if (scope.msStop){
        
           $msPerf.stop(scope.msStop);
        }
        
        if (scope.msResult){
        
           element.append($msPerf.result(scope.msResult));
        }
        
    }
    
    };
    

});