jerch/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>typed vs jsarray - creation and data insertion</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
</head>
<body>
	<h1>Open the console to view the results</h1>
	<h2><code>cmd + alt + j</code> or <code>ctrl + alt + j</code></h2>
</body>
</html>

## suite.js
"use strict";

(function (factory) {
	if (typeof Benchmark !== "undefined") {
		factory(Benchmark);
	} else {
		factory(require("benchmark"));
	}
})(function (Benchmark) {
	var suite = new Benchmark.Suite;

	Benchmark.prototype.setup = function () {
		const ATTR = 0,
		      WIDTH = 1,
		      FR = 2,
		      FG = 3,
		      FB = 4,
		      BR = 5,
		      BG = 6,
		      BB = 7;
	};


	suite.add("populate typed_data with pointer arithmetic style", function () {
		// populate typed_data with pointer arithmetic style
		let typed_data = new Uint8Array(8 * 80 * 1000);  // 640000 bytes allocated
		let value = 0;
		for (let i=0; i<1000; ++i) {    // step through rows
		    for (let j=0; j<80; ++j) {  // step through columns
		        // cell pos is 8 * i * j
		        let cellp = 8 * i * j;
		        // fill in `value & 255` as data
		        let v = value & 255;
		        typed_data[cellp+ATTR] = v;
		        typed_data[cellp+WIDTH] = v;
		        typed_data[cellp+FR] = v;
		        typed_data[cellp+FG] = v;
		        typed_data[cellp+FB] = v;
		        typed_data[cellp+BR] = v;
		        typed_data[cellp+BG] = v;
		        typed_data[cellp+BB] = v;
		        value++;
		    }
		}
	});

	suite.add("populate array_data on the fly in loop style", function () {
		// populate array_data on the fly in loop style
		let array_data = [];
		let value = 0;
		for (let i=0; i<1000; ++i) {    // step through rows
		    let row = [];
		    for (let j=0; j<80; ++j) {  // step through columns
		        let v = value & 255;
		        let cell = [v, v, v, v, v, v, v, v];
		        row.push(cell);
		        value++;
		    }
		    array_data.push(row);
		}
	});

	suite.on("cycle", function (evt) {
		console.log(" - " + evt.target);
	});

	suite.on("complete", function (evt) {
		console.log(new Array(30).join("-"));

		var results = evt.currentTarget.sort(function (a, b) {
			return b.hz - a.hz;
		});

		results.forEach(function (item) {
			console.log((idx + 1) + ". " + item);
		});
	});

	console.log("typed vs jsarray - creation and data insertion");
	console.log(new Array(30).join("-"));
	suite.run();
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>typed vs jsarray - creation and data insertion</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>
	<h2><code>cmd + alt + j</code> or <code>ctrl + alt + j</code></h2>
	</body>
	</html>
	"use strict";

	(function (factory) {
	if (typeof Benchmark !== "undefined") {
	factory(Benchmark);
	} else {
	factory(require("benchmark"));
	}
	})(function (Benchmark) {
	var suite = new Benchmark.Suite;

	Benchmark.prototype.setup = function () {
	const ATTR = 0,
	WIDTH = 1,
	FR = 2,
	FG = 3,
	FB = 4,
	BR = 5,
	BG = 6,
	BB = 7;
	};


	suite.add("populate typed_data with pointer arithmetic style", function () {
	// populate typed_data with pointer arithmetic style
	let typed_data = new Uint8Array(8 * 80 * 1000); // 640000 bytes allocated
	let value = 0;
	for (let i=0; i<1000; ++i) { // step through rows
	for (let j=0; j<80; ++j) { // step through columns
	// cell pos is 8 * i * j
	let cellp = 8 * i * j;
	// fill in `value & 255` as data
	let v = value & 255;
	typed_data[cellp+ATTR] = v;
	typed_data[cellp+WIDTH] = v;
	typed_data[cellp+FR] = v;
	typed_data[cellp+FG] = v;
	typed_data[cellp+FB] = v;
	typed_data[cellp+BR] = v;
	typed_data[cellp+BG] = v;
	typed_data[cellp+BB] = v;
	value++;
	}
	}
	});

	suite.add("populate array_data on the fly in loop style", function () {
	// populate array_data on the fly in loop style
	let array_data = [];
	let value = 0;
	for (let i=0; i<1000; ++i) { // step through rows
	let row = [];
	for (let j=0; j<80; ++j) { // step through columns
	let v = value & 255;
	let cell = [v, v, v, v, v, v, v, v];
	row.push(cell);
	value++;
	}
	array_data.push(row);
	}
	});

	suite.on("cycle", function (evt) {
	console.log(" - " + evt.target);
	});

	suite.on("complete", function (evt) {
	console.log(new Array(30).join("-"));

	var results = evt.currentTarget.sort(function (a, b) {
	return b.hz - a.hz;
	});

	results.forEach(function (item) {
	console.log((idx + 1) + ". " + item);
	});
	});

	console.log("typed vs jsarray - creation and data insertion");
	console.log(new Array(30).join("-"));
	suite.run();
	});