Skip to content

Instantly share code, notes, and snippets.

@stepheneb
Last active February 12, 2023 21:09
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stepheneb/1364172 to your computer and use it in GitHub Desktop.
Save stepheneb/1364172 to your computer and use it in GitHub Desktop.
Simple JavaScript benchmarking tool
height: 500
scrolling: yes

Simple Benchmarking Tool

See this example live

Runs benchmarks and generates the results in a table.

Setup benchmarks to run in an array of objects with two properties:

  • name: a title for the table column of results
  • run: a function that is called to run the benchmark and returns a value

Start the benchmarks by passing the table element where the results are to be placed and an array of benchmarks to run.

Here's another example where this benchmarking tool is used: Simple Molecules

source: gist.github.com/gists/1364172

(function(){
var root = this;
benchmark = {};
benchmark = { version: "0.0.1" };
benchmark.what_browser = function() {
return what_browser();
};
benchmark.run = function(benchmarks_table, benchmarks_to_run) {
run(benchmarks_table, benchmarks_to_run);
};
function what_browser() {
var chromematch = / (Chrome)\/(.*?) /,
ffmatch = / (Firefox)\/([0123456789ab.]+)/,
safarimatch = / Version\/([0123456789.]+) (Safari)\/([0123456789.]+)/,
iematch = / (MSIE) ([0123456789.]+);/,
ipadmatch = /([0123456789.]+) \((iPad);.*? Version\/([0123456789.]+) Mobile\/(\S+)/,
match;
match = navigator.userAgent.match(chromematch);
if (match && match[1]) {
if (navigator.platform.match(/Win/)) {
return {
browser: match[1],
version: match[2],
oscpu: navigator.platform
}
} else {
return {
browser: match[1],
version: match[2],
oscpu: navigator.appVersion.match(/(Macintosh); (.*?)\)/)[2]
}
}
}
match = navigator.userAgent.match(ffmatch);
if (match && match[1]) {
if (navigator.oscpu.match(/Windows /)) {
return {
browser: match[1],
version: match[2],
oscpu: navigator.platform
}
} else {
return {
browser: match[1],
version: match[2],
oscpu: navigator.oscpu
}
}
}
match = navigator.userAgent.match(safarimatch);
if (match && match[2]) {
return {
browser: match[2],
version: match[1],
oscpu: navigator.appVersion.match(/(Macintosh); (.*?)\)/)[2]
}
}
match = navigator.userAgent.match(iematch);
if (match && match[1]) {
return {
browser: match[1],
version: match[2],
oscpu: navigator.cpuClass + "/" + navigator.platform
}
}
match = navigator.userAgent.match(ipadmatch);
if (match && match[2]) {
return {
browser: match[2],
version: match[3] + "/" + match[4],
oscpu: match[1]
}
}
return {
browser: "",
version: navigator.appVersion,
oscpu: ""
}
}
function run(benchmarks_table, benchmarks_to_run) {
var i = 0, b, browser_info, results = [];
benchmarks_table.style.display = "";
var empty_table = benchmarks_table.getElementsByTagName("tr").length == 0;
function add_row() {
return benchmarks_table.appendChild(document.createElement("tr"));
}
var title_row = add_row(),
results_row = add_row();
function add_data(row, content, el) {
el = el || "td";
row.appendChild(document.createElement(el))
.textContent = content;
}
function add_column(title, data) {
if (empty_table) { add_data(title_row, title, "th") };
add_data(results_row, data)
}
browser_info = what_browser();
add_column("browser", browser_info.browser);
add_column("version", browser_info.version);
add_column("cpu/os", browser_info.oscpu);
var formatter = d3.time.format("%Y-%m-%d %H:%M");
add_column("date", formatter(new Date()))
for (i = 0; i < benchmarks_to_run.length; i++) {
b = benchmarks_to_run[i];
add_column(b.name, b.run());
}
}
// export namespace
if (root !== 'undefined') { root.benchmark = benchmark; }
})()
<!DOCTYPE html>
<html>
<head>
<meta content='text/html;charset=utf-8' http-equiv='Content-Type' />
<title>Simple Benchmarking Tool</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js"></script>
<script type="text/javascript" src="benchmark.js"></script>
<style type="text/css">
body {
font: 13px sans-serif;
}
table {
font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
border-collapse: collapse; }
th {
padding: 0 1em;
text-align: left; }
td {
border-top: 1px solid #cccccc;
padding: 0 1em; }
</style>
</head>
<body>
<h1>Example of simple benchmarking tool</h1>
<p>
This benchmarking tool can be used to run a collection of benchmarks and render the results into a table.
</p>
<p>
The example below measures the computational performance of a browser calculating the
<a href='http://en.wikipedia.org/wiki/Lennard-Jones_potential'>Lennard-Jones Potential</a>
1,000,000 times. First calculating the value and pushing the result into an array.
The second test pre-calculates the 1,000,000 values and only measures the time it takes
to read values from the pre-calculated array and store them into the result array.
</p>
<p>
Update 20200113: very suprising results: Chrome is about 9 times slower calculating
the Lennard-Jones Potential than FireFox and Safari!
</p>
<table>
<tr>
<th>browser</th>
<th>version</th>
<th>cpu/os</th>
<th>date</th>
<th>Lennard-Jones, 1,000,000 iterations (ms)</th>
<th>Lennard-Jones transferring from pre-calculated array, 1,000,000 iterations (ms)</th>
</tr>
<tr>
<td>Safari</td>
<td>13.0.4</td>
<td>Intel Mac OS X 10_15_2</td>
<td>2020-01-13 23:30</td>
<td>18</td>
<td>10</td>
</tr>
<tr>
<td>Firefox</td>
<td>72.0</td>
<td>Intel Mac OS X 10.15</td>
<td>2020-01-13 23:29</td>
<td>20</td>
<td>13</td>
</tr>
<tr>
<td>Chrome</td>
<td>79.0.3945.88</td>
<td>Intel Mac OS X 10_15_2</td>
<td>2020-01-13 23:37</td>
<td>179</td>
<td>26</td>
</tr>
</table>
<br>
<button id='run-benchmarks'>Run Benchmarks</button>
<table id="benchmark-results" />
<div id='benchmarks'>
<script type='text/javascript'>
var benchmark_results = document.getElementById("benchmark-results");
var run_benchmarks = document.getElementById("run-benchmarks");
var benchmarks_to_run = [
{
name: "Lennard-Jones, 1,000,000 iterations (ms)",
run: function() {
var epsilon = -0.4, // depth of the potential well
sigma = 4.0, // finite distance at which the inter-particle potential is zero
rmin = Math.pow(2, 1/6) * sigma, // distance at which the potential well reaches its minimum
alpha = 4 * epsilon * Math.pow(sigma, 12),
beta = 4 * epsilon * Math.pow(sigma, 6);
var start = +Date.now();
var results = [];
for (var i = 0; i <= 100; i+=0.0001) {
results.push((alpha/Math.pow(i, 12) - beta/Math.pow(i, 6)) * -1);
}
return Date.now() - start;
}
},
{
name: "Lennard-Jones transferring from pre-calculated array, 1,000,000 iterations (ms)",
run: function() {
var epsilon = -0.4, // depth of the potential well
sigma = 4.0, // finite distance at which the inter-particle potential is zero
rmin = Math.pow(2, 1/6) * sigma, // distance at which the potential well reaches its minimum
alpha = 4 * epsilon * Math.pow(sigma, 12),
beta = 4 * epsilon * Math.pow(sigma, 6),
ljf_index = [];
for (var i = 0; i <= 100; i+=0.0001) {
ljf_index.push((alpha/Math.pow(i, 12) - beta/Math.pow(i, 6)) * -1);
}
var start = +Date.now();
var results = [];
for (var i = 0; i <= 100; i+=0.0001) {
results.push(ljf_index[ ~~ (0.5 + i*10000)])
// results.push(ljf_index[ (0.5 + i*10000) << 0])
// results.push(Math.floor(i*10000)])
}
return Date.now() - start;
}
}
];
window.onload = function() {
run_benchmarks.onclick = function() {
benchmark.run(benchmark_results, benchmarks_to_run)
}
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment