Skip to content

Instantly share code, notes, and snippets.

@DerekZiemba

DerekZiemba/LoopPerfStolenArr.html

Last active April 25, 2017 17:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DerekZiemba/7742b2ad4c06dcfe1799f819da197cdc to your computer and use it in GitHub Desktop.
Save DerekZiemba/7742b2ad4c06dcfe1799f819da197cdc to your computer and use it in GitHub Desktop.
Download ZIP
Loop Performance with Array stolen from iframe (http://jsbench.github.io/#7742b2ad4c06dcfe1799f819da197cdc) #jsbench #jsperf
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Loop Performance with Array stolen from iframe</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>
Raw
LoopPerfStolenArr.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Loop Performance with Array stolen from iframe</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>
Raw
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 () {
var StolenArray = (function () {
var CustomArray = (function () {
//Steal Array from iframe so we can have our own custom array type and extend the prototype without breaking anything.
//http://dean.edwards.name/weblog/2006/11/hooray/
var iframe = document.createElement("iframe");
iframe.style.display = "none";
document.body.appendChild(iframe);
// write a script into the <iframe> and steal its Array object
frames[frames.length - 1].document.write("<script>parent['_MC-CustomArrayType'] = Array;<\/script>");
var arr = window['_MC-CustomArrayType'];
delete window['_MC-CustomArrayType'];
// document.body.removeChild(iframe);
return arr;
}());
var cssTransformHelper = (function () {
var rgx = /^matrix\((.*)\)$/;
return {
name: (function () {
var sty = document.createElement('div').style;
var names = ['transform', 'webkit-transform', '-ms-transform', '-moz-transform', '-o-transform'];
for (var i = 0, len = names.length; i < len; i++) { if (names[i] in sty) { return names[i]; } }
return names[0];
}()),
matrixToStr: function (m) {
return 'matrix(' + m[0] + ', ' + m[1] + ', ' + m[2] + ', ' + m[3] + ', ' + m[4] + ', ' + m[5] + ')';
},
parseMatrix: function (destination, str) {
if (str) {
var m = str.match(rgx);
if (m && m[1]) {
m = m[1].split(',');
for (var i = 0, len = m.length; i < len; i++) { destination[i] = parseFloat(m[i]); }
}
}
return destination;
},
};
}());
CustomArray.prototype.forEach = function (cb) { for (var idx = 0, len = this.length; idx < len; idx++) { cb(this[idx], idx); } };
Object.defineProperties(CustomArray.prototype, {
xScale: { configurable: false, enumerable: false, get: function () { return this[0]; }, set: function (value) { this[0] = value; } },
yScale: { configurable: false, enumerable: false, get: function () { return this[3]; }, set: function (value) { this[3] = value; } },
xTrans: { configurable: false, enumerable: false, get: function () { return this[4]; }, set: function (value) { this[4] = value; } },
yTrans: { configurable: false, enumerable: false, get: function () { return this[5]; }, set: function (value) { this[5] = value; } },
scale: {
configurable: false, enumerable: false,
get: function () { return this.xScale; },
set: function (value) { this.xScale = this.yScale = value; }
},
last: {
configurable: false, enumerable: false,
get: function () { return this[this.length - 1]; },
set: function (value) { this[this.length - 1] = value; }
},
cssTransformMatrix: {
configurable: false, enumerable: false,
get: function () { return cssTransformHelper.matrixToStr(this); },
set: function (value) { cssTransformHelper.parseMatrix(this, value); }
}
});
return CustomArray;
}());
var ArrProtoBind = (function () {
function CustomArray() {
var args = Array(arguments.length + 1); args[0] = null;
for (var i = 0, len = arguments.length; i < len; i++) { args[i + 1] = arguments[i]; }
var self = new (Function.prototype.bind.apply(Array, args))();
self.__proto__ = CustomArray.prototype;
return self;
}
CustomArray.prototype = {
_super: Array.prototype,
constructor: Array.prototype.constructor,
toString: function () { return 'matrix(' + this.matrix.join(', ') + ')'; },
};
Object.defineProperties(CustomArray.prototype, {
xScale: { configurable: false, enumerable: false, get: function () { return this[0]; }, set: function (value) { this[0] = value; } },
yScale: { configurable: false, enumerable: false, get: function () { return this[3]; }, set: function (value) { this[3] = value; } },
xTrans: { configurable: false, enumerable: false, get: function () { return this[4]; }, set: function (value) { this[4] = value; } },
yTrans: { configurable: false, enumerable: false, get: function () { return this[5]; }, set: function (value) { this[5] = value; } },
scale: {
configurable: false, enumerable: false,
get: function () { return this.xScale; },
set: function (value) { this.xScale = this.yScale = value; }
},
last: {
configurable: false, enumerable: false,
get: function () { return this[this.length - 1]; },
set: function (value) { this[this.length - 1] = value; }
}
});
CustomArray.prototype.__proto__ = CustomArray.prototype._super;
return CustomArray;
}());
var s = document.createElement('script');
s.src = 'https://code.jquery.com/jquery-3.1.1.slim.min.js';
document.head.appendChild(s);
var sumValue = 0;
var sumIdx = 0;
var sumCalls = 0;
function action(value, idx) {
sumValue += value;
sumIdx += idx;
sumCalls++;
}
Array.prototype.ForEach = function (cb) { for (var idx = 0, len = this.length; idx < len; idx++) { cb(this[idx], idx); } }
function initArray(arr) {
for (var idx = 0, len = arr.length; idx < len; idx++) {
arr[idx] = (Math.random() / (Math.random() * Math.random()) * 1.2);// | 0;
}
return arr;
}
var arrRandom1000 = initArray(new Array(1000));
var arrStolenVals = initArray(new StolenArray(1000));
var arrProtoBindVals = initArray(new ArrProtoBind(1000));
};
Benchmark.prototype.teardown = function () {
sumValue = 0;
sumIdx = 0;
sumCalls = 0;
};
suite.add("Native.allocate", function () {
//Native.allocate
var x = new Array();
for (var idx = 0; idx < arrRandom1000.length; idx++) {
x.push(arrRandom1000[idx]);
}
});
suite.add("Stolen.allocate", function () {
//Stolen.allocate
var x = new StolenArray();
for (var idx = 0; idx < arrStolenVals.length; idx++) {
x.push(arrStolenVals[idx]);
}
});
suite.add("ProtoBind.allocate", function () {
//ProtoBind.allocate
var x = new ArrProtoBind();
for (var idx = 0; idx < arrProtoBindVals.length; idx++) {
x.push(arrProtoBindVals[idx]);
}
});
suite.add("Native.forEach", function () {
//Native.forEach
arrRandom1000.forEach(action);
});
suite.add("Stolen.forEeach", function () {
//Stolen.forEach
arrStolenVals.forEach(action);
});
suite.add("ProtoBind.forEeach", function () {
//ProtoBind.forEach
arrProtoBindVals.forEach(action);
});
suite.add("Native.shift", function () {
//Native.shift
for (var idx = 0; idx < arrRandom1000.length; idx++) {
arrRandom1000.unshift(arrRandom1000.pop());
}
});
suite.add("Stolen.shift", function () {
//Stolen.shift
for (var idx = 0; idx < arrStolenVals.length; idx++) {
arrStolenVals.unshift(arrStolenVals.pop());
}
});
suite.add("ProtoBind.shift", function () {
//ProtoBind.shift
for (var idx = 0; idx < arrProtoBindVals.length; idx++) {
arrProtoBindVals.unshift(arrProtoBindVals.pop());
}
});
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("Loop Performance .jsbench");
console.log(new Array(30).join("-"));
suite.run();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment