Skip to content

Instantly share code, notes, and snippets.

@anishpateluk

anishpateluk/index.html

Last active October 27, 2015 15:50
Show Gist options
  • Save anishpateluk/6d5599b55f8cdf837b0d to your computer and use it in GitHub Desktop.
Save anishpateluk/6d5599b55f8cdf837b0d to your computer and use it in GitHub Desktop.
Download ZIP
knockoutJS rendering tests - jsbin: https://output.jsbin.com/wihola
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Knockout Performance Tests</title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<script src="https://rawgit.com/brianmhunt/knockout-fast-foreach/master/dist/knockout-fast-foreach.js"></script>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"/>
<style>
.code-block {
font-size: 0.8em;
}
.back-to-top {
font-size: 8rem;
font-weight: bold;
height: 4rem;
line-height: 7rem;
width: 5rem;
display: inline-block;
position: fixed;
bottom: 0;
right: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="card-block card">
<h1 id="top">KnockoutJS collection rendering tests</h1>
<br /><br />
<form role="form" class="form-inline">
<div class="form-group">
<label>Array Size</label>
<input type="text" class="form-control" data-bind="value: size" />
</div>
<button class="btn btn-warning" data-bind="click: clean">Reset All Tests</button>
<button class="btn btn-primary" data-bind="click: run">Run All Tests</button>
</form>
</div>
<div class="row">
<div class="col-sm-3" data-bind="with: test1">
<h5>Test 1</h5>
<h5>original: array replacement</h5>
<div class="code-block">
<code>myObservableArray(newUnderlyingArray)</code>
<br /><br />
<code>data-bind="foreach: myObservableArray"</code>
</div>
<br/>
<div>
<button class="btn btn-warning" data-bind="click: clean">Reset Test</button>
<button class="btn btn-primary" data-bind="click: run">Run Test</button>
</div>
<br />
<div class="alert alert-success" data-bind="visible: log"><strong data-bind="text: log"></strong></div>
<div data-bind="foreach: list">
<div class="card card-block">
<h4 class="card-title" data-bind="text: Id"></h4>
<p class="card-text" data-bind="text: Blurb"></p>
<a href="#" class="btn btn-primary" data-bind="click: func">Do Something</a>
</div>
</div>
</div>
<div class="col-sm-3" data-bind="with: test2">
<h5>Test 2</h5>
<h5>original: array push</h5>
<div class="code-block">
<code>ko.utils.arrayPushAll(myObservableArray, newUnderlyingArray)</code>
<br /><br />
<code>data-bind="foreach: myObservableArray"</code>
</div>
<br/>
<div>
<button class="btn btn-warning" data-bind="click: clean">Reset Test</button>
<button class="btn btn-primary" data-bind="click: run">Run Test</button>
</div>
<br />
<div class="alert alert-success" data-bind="visible: log"><strong data-bind="text: log"></strong></div>
<div data-bind="foreach: list">
<div class="card card-block">
<h4 class="card-title" data-bind="text: Id"></h4>
<p class="card-text" data-bind="text: Blurb"></p>
<a href="#" class="btn btn-primary" data-bind="click: func">Do Something</a>
</div>
</div>
</div>
<div class="col-sm-3" data-bind="with: test3">
<h5>Test 3</h5>
<h5>Fast: array replacement</h5>
<div class="code-block">
<code>myObservableArray(newUnderlyingArray)</code>
<br /><br />
<code>data-bind="fastForEach: myObservableArray"</code>
</div>
<br/>
<div>
<button class="btn btn-warning" data-bind="click: clean">Reset Test</button>
<button class="btn btn-primary" data-bind="click: run">Run Test</button>
</div>
<br />
<div class="alert alert-success" data-bind="visible: log"><strong data-bind="text: log"></strong></div>
<div data-bind="foreach: list">
<div class="card card-block">
<h4 class="card-title" data-bind="text: Id"></h4>
<p class="card-text" data-bind="text: Blurb"></p>
<a href="#" class="btn btn-primary" data-bind="click: func">Do Something</a>
</div>
</div>
</div>
<div class="col-sm-3" data-bind="with: test4">
<h5>Test 4</h5>
<h5>Fast: array push</h5>
<div class="code-block">
<code>ko.utils.arrayPushAll(myObservableArray, newUnderlyingArray)</code>
<br /><br />
<code>data-bind="fastForEach: myObservableArray"</code>
</div>
<br/>
<div>
<button class="btn btn-warning" data-bind="click: clean">Reset Test</button>
<button class="btn btn-primary" data-bind="click: run">Run Test</button>
</div>
<br />
<div class="alert alert-success" data-bind="visible: log"><strong data-bind="text: log"></strong></div>
<div data-bind="foreach: list">
<div class="card card-block">
<h4 class="card-title" data-bind="text: Id"></h4>
<p class="card-text" data-bind="text: Blurb"></p>
<a href="#" class="btn btn-primary" data-bind="click: func">Do Something</a>
</div>
</div>
</div>
</div>
</div>
<a href="#top" class="alert alert-info back-to-top">
^
</a>
<script type="text/javascript">
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
var noop = function() {};
var getArray = function(n) {
var x = [];
for (var i = 1; i <= n; i++) {
var g = guid();
x.push({ Id: i + "-id-" + g, Blurb: g + " with supporting text below as a natural lead-in to additional content.", func: noop });
}
return x;
}
var underlyingArray = getArray(50);
var size = ko.observable(50);
var test = function (key, callback) {
this.log = ko.observable();
this.list = ko.observableArray([]);
this.clean = function() {
this.list([]);
this.log("");
}
this.run = function () {
console.time(key);
var start = performance.now();
callback(this.list, underlyingArray);
var end = performance.now();
console.timeEnd(key);
this.log((end - start).toFixed(3) + "ms");
}
}
var arrayreplace = function(a, b) { a(b); }
var arraypush = function(a, b) { ko.utils.arrayPushAll(a, b); }
var viewModel = {
log: ko.observable(),
size: size,
test1: new test("test1",arrayreplace),
test2: new test("test2",arraypush),
test3: new test("test3",arrayreplace),
test4: new test("test4", arraypush),
clean: function() {
this.test1.clean();
this.test2.clean();
this.test3.clean();
this.test4.clean();
},
run: function () {
underlyingArray = getArray(this.size());
this.test1.run();
this.test2.run();
this.test3.run();
this.test4.run();
},
};
viewModel.size.subscribe(function(n) { underlyingArray = getArray(n); });
ko.applyBindings(viewModel);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment