innerHTML vs appendChild

Benchmark created by hexx on

Description

drop down built from an object, two methods -> append child inside loop vs loop creating array and its contents are then inserted into select element

Preparation HTML

<label for="send-to">Send to: </label>
<select id="send-to" name="send-to">
</select>

Test runner

Ready to run.

Testing in
TestOps/sec
array to innerHTML
(function () {
    'use strict';
    /**
        * these should be JSON files
        * for now hard-coded objects
    */
    var countries = {
            0: '- Please choose -',
            au: 'Australia',
            at: 'Austria',
            bh: 'Bahrain',
            be: 'Belgium',
            bg: 'Bulgaria',
            ca: 'Canada',
            cy: 'Cyprus',
            cz: 'Czech Republic',
            dk: 'Denmark',
            ee: 'Estonia',
            fi: 'Finland',
            fr: 'France',
            de: 'Germany',
            gr: 'Greece',
            gu: 'Guam',
            hk: 'Hong Kong',
            hu: 'Hungary',
            is: 'Iceland',
            ie: 'Ireland',
            it: 'Italy',
            jp: 'Japan',
            jo: 'Jordan',
            kw: 'Kuwait',
            lv: 'Latvia',
            lt: 'Lithuania',
            lu: 'Luxembourg',
            my: 'Malaysia',
            mt: 'Malta',
            nl: 'Netherlands',
            nz: 'New Zealand',
            no: 'Norway',
            om: 'Oman',
            ph: 'Philippines',
            pl: 'Poland',
            pt: 'Portugal',
            qa: 'Qatar',
            ro: 'Romania',
            sa: 'Saudi Arabia',
            sg: 'Singapore',
            sk: 'Slovakia',
            si: 'Slovenia',
            za: 'South Africa',
            kr: 'South Korea',
            es: 'Spain',
            se: 'Sweden',
            ch: 'Switzerland',
            tw: 'Taiwan',
            ae: 'United Arab Emirates',
            gb: 'United Kingdom',
            us: 'United States'
        },
        sendToField = document.getElementById('send-to');

    function createOptions(selectEl, data) {
        var children = [], prop;
        selectEl.innerHTML = '';
        for (prop in data) {
            if (data.hasOwnProperty(prop)) {
                children.push('<option value="' + prop + '">' + data[prop] + '</option>');
            }
        }
        selectEl.innerHTML = children.join('\n');
    }

    function init() {
        createOptions(sendToField, countries);
    }

    return init();
}());
ready
appendChild in the loop
(function () {
    'use strict';
    /**
        * these should be JSON files
        * for now hard-coded objects
    */
    var countries = {
            0: '- Please choose -',
            au: 'Australia',
            at: 'Austria',
            bh: 'Bahrain',
            be: 'Belgium',
            bg: 'Bulgaria',
            ca: 'Canada',
            cy: 'Cyprus',
            cz: 'Czech Republic',
            dk: 'Denmark',
            ee: 'Estonia',
            fi: 'Finland',
            fr: 'France',
            de: 'Germany',
            gr: 'Greece',
            gu: 'Guam',
            hk: 'Hong Kong',
            hu: 'Hungary',
            is: 'Iceland',
            ie: 'Ireland',
            it: 'Italy',
            jp: 'Japan',
            jo: 'Jordan',
            kw: 'Kuwait',
            lv: 'Latvia',
            lt: 'Lithuania',
            lu: 'Luxembourg',
            my: 'Malaysia',
            mt: 'Malta',
            nl: 'Netherlands',
            nz: 'New Zealand',
            no: 'Norway',
            om: 'Oman',
            ph: 'Philippines',
            pl: 'Poland',
            pt: 'Portugal',
            qa: 'Qatar',
            ro: 'Romania',
            sa: 'Saudi Arabia',
            sg: 'Singapore',
            sk: 'Slovakia',
            si: 'Slovenia',
            za: 'South Africa',
            kr: 'South Korea',
            es: 'Spain',
            se: 'Sweden',
            ch: 'Switzerland',
            tw: 'Taiwan',
            ae: 'United Arab Emirates',
            gb: 'United Kingdom',
            us: 'United States'
        },
        sendToField = document.getElementById('send-to');

    function createOptions(selectEl, data) {
        var prop, child;
        selectEl.innerHTML = '';
        for (prop in data) {
            if (data.hasOwnProperty(prop)) {
                child = document.createElement('option');
                child.value = prop;
                child.innerHTML = data[prop];
                selectEl.appendChild(child);
            }
        }
    }

    function init() {
        createOptions(sendToField, countries);
    }

    return init();
}());
ready

Revisions

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