Rendering DOM in Mithril (v3)

Revision 3 of this benchmark created by Barney on


Description

Vanilla JS vs Mithril m() vs Mithril precompiled views

Preparation HTML

<script src="https://rawgit.com/lhorie/mithril.js/a607060267cc958467c9a52d6671986405096e20/mithril.js"></script>

Setup

// Settings
    // --------
    var numberOfRows = 100
      , numberOfColumns = 100
      ;
    
    // Instantiate variables.
    var container, childNode, i, j, table, row, cell, rows, cells;
    
    // Create a container for our benchmark.
    container = document.createElement('div');
    document.body.appendChild(container);

Teardown


    // Clear the contents of the container.
    while ((childNode = container.lastElementChild)) {
        container.removeChild(childNode);
    }
    
  

Test runner

Ready to run.

Testing in
TestOps/sec
Vanilla JS
// Create a table element.
table = document.createElement('table');

// Do the following `numberOfRows` times:
for (i = 1; i <= numberOfRows; i++) {
    // - create a table row and a header cell;
    row = document.createElement('tr');
    cell = document.createElement('th');
    cell.appendChild(document.createTextNode('Row ' + i));
    row.appendChild(cell);

    // - in this row create `numberOfColumns` cells;
    for (j = 1; j <= numberOfColumns; j++) {
        cell = document.createElement('td');
        cell.appendChild(document.createTextNode('' + j));
        row.appendChild(cell);
    }

    // - when the row is ready, add it to our table.
    table.appendChild(row);
}

// When the table has been populated, inject it to the live DOM.
container.appendChild(table);
table = null;
 
ready
Mithril m()
// Create a table (an array of mithril rows).
rows = [];

// Do the following `numberOfRows` times:
for (i = 1; i <= numberOfRows; i++) {
    // - create a row (an array of mithril cells) and add a header cell to it;
    cells = [];
    cells.push(m('th', 'Row ' + i));

    // - in this row create `numberOfColumns` mithril cells;
    for (j = 1; j <= numberOfColumns; j++) {
        cells.push(m('td', '' + j));
    }

    // - when the row is ready, push it to our table.
    rows.push(m('tr', cells));
}

// When the table has been populated, render it in the live DOM.
table = m('table', rows);
m.render(container, table, true);
 
ready
Mithril precompiled views
// Create a table (an array of mithril rows).
rows = [];

// Do the following `numberOfRows` times:
for (i = 1; i <= numberOfRows; i++) {
    // - create a row (an array of mithril cells) and add a header cell to it;
    cells = [];
    cells.push({tag: 'th', attrs: {}, children: [('Row ' + i)]});

    // - in this row create `numberOfColumns` mithril cells;
    for (j = 1; j <= numberOfColumns; j++) {
        cells.push({tag: 'td', attrs: {}, children: [('' + j)]});
    }

    // - when the row is ready, push it to our table.
    rows.push({tag: 'tr', attrs: {}, children: cells});
}

// When the table has been populated, render it in the live DOM.
table = {tag: 'table', attrs: {}, children: rows};
m.render(container, table, true);
 
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.