Test JS Performance with your own browser

We rarely need to test the performance of our written javascript and we need tools to perform this process. We really don’t need any tool for making the performance test as our browser is a performance tester by itself. I wrote a little javascript in which the performance of our javascript can be tested to a level.

Here’s the code:

/**
 * Webkul Software.
 *
 * @category Webkul
 * @package JS_Performance
 * @author Webkul
 * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
 * @license https://store.webkul.com/license.html
 */
var performance_array = [];
var cycles = 10; // makes the average out of this number
var runs = 100; // number of times loop should process

function function1() {
	// write your code here
}

function function2() {
	// write your code here
}

var functions = ['function1', 'function2']; // Make an entry of the functions defined above

functions.forEach(function (argument) {
	var func = eval("argument") + '();'; // manage the function to a variable
	var timestamp = 0;
	for (var i = 0; i < cycles; i++) {
		var pre = performance.now();
		for (var j = 0; j < runs; j++) {
			eval(func); // runs the function
		}
		var now = performance.now();
		var time_in_cycle =  now - pre;
		timestamp += time_in_cycle;
	}
	performance_array[argument] = timestamp/cycles;
});
console.log(performance_array);

This code can be used to make a test to some extent and to an accuracy but they are not totally accurate.

I have used the code to make a test over, whether to get an element from its ID or traversing it from its parent. This code can give you an idea of how to use.

<!-- 
/**
 * Webkul Software.
 *
 * @category Webkul
 * @package JS_Performance
 * @author Webkul
 * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
 * @license https://store.webkul.com/license.html
 */
 -->
<div>
	<button id="button" onclick="calculate();">button</button>
</div>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
var performance_array = [];
var cycles = 10; // makes the average out of this number
var runs = 100; // number of times loop should process

function function1() {
	$('#button');
}

function function2() {
	$('div button');
}
// you can add more functions here

var functions = ['function1', 'function2']; // Make an entry of the functions defined above

function calculate() {
	functions.forEach(function (argument) {
		var func = eval("argument") + '();'; // manage the function to a variable
		var timestamp = 0;
		for (var i = 0; i < cycles; i++) {
			var pre = performance.now();
			for (var j = 0; j < runs; j++) {
				eval(func); // runs the function
			}
			var now = performance.now();
			var time_in_cycle =  now - pre;
			timestamp += time_in_cycle;
		}
		performance_array[argument] = timestamp/cycles;
	});
	console.log(performance_array);
}

Here, in this code, I’ve used the jQuery to get the element and for traverse down the child. This will give you an idea of the performance of your code. Hope, it will help you out.

Vikhyat Sharma 6 Badges

• 26 Dec, 2016
  Created by - Vikhyat Sharma