Question

I have a Google Chrome extension that creates a select-all function for a search engine, but it is slow (1-14 seconds, 250-1000 results) is there a faster way to do this? My code is below:

var dropdownvalue = dropdown.options[dropdown.selectedIndex].value;
if ((dropdownvalue == "createFullCheckboxes") || (dropdownvalue == "createNameCheckboxes")) {
    var div_embed1 = document.getElementById('results-pane');

    if (div_embed1) {
        div_embed1.innerHTML = '<form id="checkbox-form">' + div_embed1.innerHTML + '</form>';
    }

    var i;
    var x = document.getElementsByClassName('name');

    for (i = 0; i < x.length; i++) {
        x[i].innerHTML = '<input id="checkbox" type="checkbox">' + x[i].innerHTML + '';
    }

    checkedAll();
    return;
}​

I tried changing the for loop to this: for (var i = 0, len = x.length; i < len; i++){ but there was only a 20ms difference. CheckedAll() is a function that simply selects all of the checkboxes.

The other part (not shown) that loops through the selected checkboxes and actually makes the select-all work is much faster at 92ms and even for 1000 results it is still fast.

Here is a snip from the chrome dev tools:

Thank you.

Answer 1

I would test:

var x = document.getElementsByClassName('name');
var h = '<input class="checkbox" type="checkbox">';
var i = x.length;
while(i--){ x[i].innerHTML = h + x[i].innerHTML; }

the equal test should be faster than the less than test.

Try a Duffs Device:(speculative as we do not know the markup render and the prototype properties that might impact negatively)(NOTE removed the id= to avoid duplicate ID) replaced with class)

function process(xi, h) {
    xi.innerHTML = h + xi.innerHTML;
}
var x = document.getElementsByClassName('name');
var h = '<input class="checkbox" type="checkbox">';
var iterations = Math.floor(x.length / 8);
var leftover = x.length % 8;
var i = 0;

if (leftover > 0) {
    do {
        process(x[i++], h);
    } while (--leftover > 0);
}

do {
    process(x[i++], h);
    process(x[i++], h);
    process(x[i++], h);
    process(x[i++], h);
    process(x[i++], h);
    process(x[i++], h);
    process(x[i++], h);
    process(x[i++], h);
} while (--iterations > 0);