创建复选框的最快方法

Question

我有一个Google Chrome扩展程序，可以为搜索引擎创建一个全选功能，但它很慢（1-14秒，250-1000个结果）有更快的方法吗？我的代码如下：

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;
}​

我尝试将for循环更改为：for (var i = 0, len = x.length; i < len; i++){，但只有20ms的差异。 CheckedAll()是一个只选择所有复选框的函数。

循环选中的复选框并实际使选择所有工作的另一部分（未显示）在92毫秒时更快，即使1000个结果仍然很快。

以下是chrome dev工具的剪辑：

谢谢。

Answer 1

我会测试：

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; }

等于测试应该比低于测试快。

尝试一个Duffs设备:(推测，因为我们不知道标记渲染和可能会产生负面影响的原型属性）（注意删除了id =以避免重复ID）替换为类）

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);