as-com/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>array vs object stuff</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;


	suite.add("var foo = {", function () {
		var foo = {
			cursor: "meow",
			display: "inline-block",
			minHeight: "1em",
			border: "none",
			verticalAlign: "verticalAlign",
			backgroundColor: "woof",
			backgroundImage: "quack",
			color: "moo",
			fontFamily: "fontFamily",
			margin: "0em ${horizontalMargin} ${verticalMargin} 0em",
			padding: "${verticalPadding} ${horizontalPadding} ${verticalPaddingVal + shadowOffset}em",
			textTransform: "textTransform",
			textShadow: "oink",
			fontWeight: "fontWeight",
			lineHeight: "lineHeight",
			fontStyle: "normal",
			textAlign: "center",
			textDecoration: "none",
			borderRadius: "borderRadius",
			boxShadow: "quack",
			userSelect: "none",
			transition: "transition",
			willChange: "willChange",
			webkitTapHighlightColor: "tapColor",

			":hover": {
		    	backgroundColor: "neigh",
		    	backgroundImage: "arf",
		    	boxShadow: "tweet",
		    	color: "chirp"
		    },

			":focus": {
		    	backgroundColor: "honk",
		    	backgroundImage: "caw",
		    	color: "squeak",
		    	boxShadow: "focusBoxShadow"
		    },

			":active": {
		    	backgroundColor: "adjncd",
		    	backgroundImage: "ddsvddfs",
		    	color: "dfvfsvsfvds",
		    	boxShadow: "erfcderfv"
		    },

			opacity: "edsdvfvfs",
			pointerEvents: "dfssvdfvdsfvsd",

			fontSize: "23desef"
		};

		for (var k in foo) {
		    var prop = k;
		    var val = foo[k];

		    // do other stuff
		}
	});

	suite.add("var foo = [", function () {
		var foo = [
			["cursor", "meow"],
			["display", "inline-block"],
			["minHeight", "1em"],
			["border", "none"],
			["verticalAlign", "verticalAlign"],
			["backgroundColor", "woof"],
			["backgroundImage", "quack"],
			["color", "moo"],
			["fontFamily", "fontFamily"],
			["margin", "0em ${horizontalMargin} ${verticalMargin} 0em"],
			["padding", "${verticalPadding} ${horizontalPadding} ${verticalPaddingVal + shadowOffset}em"],
			["textTransform", "textTransform"],
			["textShadow", "oink"],
			["fontWeight", "fontWeight"],
			["lineHeight", "lineHeight"],
			["fontStyle", "normal"],
			["textAlign", "center"],
			["textDecoration", "none"],
			["borderRadius", "borderRadius"],
			["boxShadow", "quack"],
			["userSelect", "none"],
			["transition", "transition"],
			["willChange", "willChange"],
			["webkitTapHighlightColor", "tapColor"],

			[":hover", [
		    	["backgroundColor", "neigh"],
		    	["backgroundImage", "arf"],
		    	["boxShadow", "tweet"],
		    	["color", "chirp"]
		    ]],

			[":focus", [
		    	["backgroundColor", "honk"],
		    	["backgroundImage", "caw"],
		    	["color", "squeak"],
		    	["boxShadow", "focusBoxShadow"]
		    ]],

			[":active", [
		    	["backgroundColor", "adjncd"],
		    	["backgroundImage", "ddsvddfs"],
		    	["color", "dfvfsvsfvds"],
		    	["boxShadow", "erfcderfv"]
		    ]],
			["opacity", "edsdvfvfs"],
			["pointerEvents", "dfssvdfvdsfvsd"],
			["fontSize", "23desef"]
		];

		for (var i = 0, len = foo.length; i < len; i++) {
		    var prop = foo[i][0];
		    var val = foo[i][1];
		}
	});

	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("array vs object stuff");
	console.log(new Array(30).join("-"));
	suite.run();
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>array vs object stuff</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;



	suite.add("var foo = {", function () {
	var foo = {
	cursor: "meow",
	display: "inline-block",
	minHeight: "1em",
	border: "none",
	verticalAlign: "verticalAlign",
	backgroundColor: "woof",
	backgroundImage: "quack",
	color: "moo",
	fontFamily: "fontFamily",
	margin: "0em ${horizontalMargin} ${verticalMargin} 0em",
	padding: "${verticalPadding} ${horizontalPadding} ${verticalPaddingVal + shadowOffset}em",
	textTransform: "textTransform",
	textShadow: "oink",
	fontWeight: "fontWeight",
	lineHeight: "lineHeight",
	fontStyle: "normal",
	textAlign: "center",
	textDecoration: "none",
	borderRadius: "borderRadius",
	boxShadow: "quack",
	userSelect: "none",
	transition: "transition",
	willChange: "willChange",
	webkitTapHighlightColor: "tapColor",

	":hover": {
	backgroundColor: "neigh",
	backgroundImage: "arf",
	boxShadow: "tweet",
	color: "chirp"
	},

	":focus": {
	backgroundColor: "honk",
	backgroundImage: "caw",
	color: "squeak",
	boxShadow: "focusBoxShadow"
	},

	":active": {
	backgroundColor: "adjncd",
	backgroundImage: "ddsvddfs",
	color: "dfvfsvsfvds",
	boxShadow: "erfcderfv"
	},

	opacity: "edsdvfvfs",
	pointerEvents: "dfssvdfvdsfvsd",

	fontSize: "23desef"
	};

	for (var k in foo) {
	var prop = k;
	var val = foo[k];

	// do other stuff
	}
	});

	suite.add("var foo = [", function () {
	var foo = [
	["cursor", "meow"],
	["display", "inline-block"],
	["minHeight", "1em"],
	["border", "none"],
	["verticalAlign", "verticalAlign"],
	["backgroundColor", "woof"],
	["backgroundImage", "quack"],
	["color", "moo"],
	["fontFamily", "fontFamily"],
	["margin", "0em ${horizontalMargin} ${verticalMargin} 0em"],
	["padding", "${verticalPadding} ${horizontalPadding} ${verticalPaddingVal + shadowOffset}em"],
	["textTransform", "textTransform"],
	["textShadow", "oink"],
	["fontWeight", "fontWeight"],
	["lineHeight", "lineHeight"],
	["fontStyle", "normal"],
	["textAlign", "center"],
	["textDecoration", "none"],
	["borderRadius", "borderRadius"],
	["boxShadow", "quack"],
	["userSelect", "none"],
	["transition", "transition"],
	["willChange", "willChange"],
	["webkitTapHighlightColor", "tapColor"],

	[":hover", [
	["backgroundColor", "neigh"],
	["backgroundImage", "arf"],
	["boxShadow", "tweet"],
	["color", "chirp"]
	]],

	[":focus", [
	["backgroundColor", "honk"],
	["backgroundImage", "caw"],
	["color", "squeak"],
	["boxShadow", "focusBoxShadow"]
	]],

	[":active", [
	["backgroundColor", "adjncd"],
	["backgroundImage", "ddsvddfs"],
	["color", "dfvfsvsfvds"],
	["boxShadow", "erfcderfv"]
	]],
	["opacity", "edsdvfvfs"],
	["pointerEvents", "dfssvdfvdsfvsd"],
	["fontSize", "23desef"]
	];

	for (var i = 0, len = foo.length; i < len; i++) {
	var prop = foo[i][0];
	var val = foo[i][1];
	}
	});

	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("array vs object stuff");
	console.log(new Array(30).join("-"));
	suite.run();
	});