Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anishpatelukpro
0viewers