List.js - Add 100 000 items on initialization

JavaScript performance comparison

Test case created by Javve

Info

This is a test to find out how fast List.js (www.listjs.com) creates a list with 100 000 items on initialization with 200 items visible (default settings)

Specification (or read the code) 1 table 4 columns for each row

Preparation code

<div class="example c1">
    <h2>Contact list</h2>
    <div id="contacts" style="height:200px; overflow:scroll;">
        <table>
            <thead>
                <tr>
                    <th class="sort" rel="name">Name</th>
                    <th class="sort" rel="age">Age</th>
                    <th class="sort" rel="city">City</th>
                    <th colspan="2">
                        <input type="text" class="search" placeholder="Search contact" />
                    </th>
                </tr>
            </thead>
                </table>
                <div class="huge">
        <table>
            <tbody class="list">
                <tr><td class="id" style="display:none;"></td><td class="name"></td><td class="age"></td><td class="city"></td></tr>
            </tbody>
        </table>
        </div>
    </div>
</div>
<script src="//listjs.com/js/list.js"></script>
<script>
Benchmark.prototype.setup = function() {
    function randomString(length) {
        var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
       
        if (! length) {
            length = Math.floor(Math.random() * chars.length);
        }
       
        var str = '';
        for (var i = 0; i < length; i++) {
            str += chars[Math.floor(Math.random() * chars.length)];
        }
        return str;
    }
   
   
    var contacts = [];
    // Init list
    for (var i = 0; i < 100000; i++) {
       contacts.push({
           id: Math.floor(Math.random()*1100000),
           name: randomString(13),
           age: Math.floor(Math.random()*110),
           city: randomString(13)
       });
    }
};
</script>

Preparation code output

Contact list

Name Age City

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Init List.js
// Define value names
var templates = {
    valueNames: [ 'id', 'name', 'age', 'city' ]
};

var contactList = new List('contacts', templates, contacts);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment