JavaScript Performance Analysis And The Mutating Interface: Part One

instrumented_examples.js

var  loadData = function(){

	var getDataTimer = stopwatch();
	getDataTimer.start();

	$http.get('/getMyData')
		.success(function(data, status, headers, config) {
			getDataTimer.stop();
			console.log('Get data time in ms ', getDataTimer.getElapsed())
	
			var manipulateDataTimer = stopwatch();
			manipulateDataTimer.start();		
			data = _.map(data, function(item){
				return item.Info + " as of today";
			}
			manipulateDataTimer.stop();		
			console.log('Manipulate data time in ms ', manipulateDataTimer.getElapsed())
			
			var updateDataTimer = stopwatch();
			updateDataTimer.start();

			dataSource.update($scope.someData, data);

			updateDataTimer.stop();
			console.log('Update datasource time in ms ', updateDataTimer.getElapsed())
		})
		.error(function(data, status, headers, config) {
			console.error(status);
		});
};

optimized_update.js

update : function(item, data){
	item = new observableArray();
	item.setData(data);
}

stopwatch.js

var stopwatch = function(){

    return {
	
	_isStopped:function(){
	    return this.startedOn && this.stoppedOn;
	},
	
	_isRunning:function(){
	    return this.startedOn && !this.stoppedOn;
	},
	
	start:function(){ 
	    this.startedOn = new Date();
	},
	
	stop:function(){ 
	    this.stoppedOn = new Date();
	},
	
	reset:function(){ 
	    this.startedOn = null;
	    this.stoppedOn = null;
	},
	
	restart:function(){
	    this.reset();
	    this.start();
	},

	getElapsed : function(){
	    if(this._isStopped()) return Math.abs(this.stoppedOn - this.startedOn);
	    else if(this._isRunning()) Math.abs(new Date() - this.startedOn);
    	    else return 0;
	}
    };
};

uninstremented_example.js

var  loadData = function(){
	$http.get('/getMyData')
		.success(function(data, status, headers, config) {
		
			data = _.map(data, function(item){
				return item.Info + " as of today";
			}
			
			dataSource.update($scope.someData, data);
		})
		.error(function(data, status, headers, config) {
			console.error(status);
		});
};

unoptimized_update.js

update : function(item, data){
	item = new observableArray();
	for(var i=0; i < data.length; i++){
		item[i] = data[i];
	}
}