Javascript 创建复选框的最快方法

我有一个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;
}​

var-dropdownvalue=dropdown.options[dropdown.selectedIndex].value；
如果（（dropdownvalue==“CreateFullCheckBox”）| |（dropdownvalue==“CreateNameCheckBox”））{
var div_embed1=document.getElementById（'results-pane'）；
如果（第1部分）{
div_embed1.innerHTML=''+div_embed1.innerHTML+''；
}
var i；
var x=document.getElementsByClassName（'name'）；
对于（i=0；i

我尝试将for循环更改为：

for（var I=0，len=x.length；I

但只有20ms的差异。

CheckedAll（）

是一个只选择所有复选框的函数

另一个部分（未显示）在选中的复选框中循环并实际执行“全部选择”操作，在92毫秒时速度要快得多，即使对于1000个结果，速度也要快得多

以下是chrome开发工具的剪贴画：

谢谢。

我想测试一下：

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

var x=document.getElementsByClassName（'name'）；
var h=''；
var i=x.长度；
而（i--）{x[i].innerHTML=h+x[i].innerHTML；}

相等测试应比小于测试快

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

功能过程（xi，h）{
iNelHTML= H+XI.InEnHTML；
}
var x=document.getElementsByClassName（'name'）；
var h=''；
var迭代=数学楼层（x.length/8）；
var剩余=x.长度%8；
var i=0；
如果（剩余>0）{
做{
过程（x[i++]，h）；
}而（--剩余>0）；
}
做{
过程（x[i++]，h）；
过程（x[i++]，h）；
过程（x[i++]，h）；
过程（x[i++]，h）；
过程（x[i++]，h）；
过程（x[i++]，h）；
过程（x[i++]，h）；
过程（x[i++]，h）；
}而（--iterations>0）；

我会测试：

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

var x=document.getElementsByClassName（'name'）；
var h=''；
var i=x.长度；
而（i--）{x[i].innerHTML=h+x[i].innerHTML；}

相等测试应比小于测试快

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

功能过程（xi，h）{
iNelHTML= H+XI.InEnHTML；
}
var x=document.getElementsByClassName（'name'）；
var h=''；
var迭代=数学楼层（x.length/8）；
var剩余=x.长度%8；
var i=0；
如果（剩余>0）{
做{
过程（x[i++]，h）；
}而（--剩余>0）；
}
做{
过程（x[i++]，h）；
过程（x[i++]，h）；
过程（x[i++]，h）；
过程（x[i++]，h）；
过程（x[i++]，h）；
过程（x[i++]，h）；
过程（x[i++]，h）；
过程（x[i++]，h）；
}而（--iterations>0）；

dom访问速度慢，而不是你的循环。与dom操作相比，循环是微不足道的。你必须使用数组进行重构。推送字符串，然后在最后加入并将一个大文本结果放入dom中。有一次我认为是dom，但没有看到不同的方式，你能详细解释一下吗？谢谢。每次循环迭代您都要使用dom。相反，如果可以像在定义的大区域周围画一个正方形那样完整地创建html，这就是方法。您必须在示例中显示您的dom，以便我根据renderI无法从pa复制和粘贴的方式显示特定的方法或者创建一个演示，因为它太复杂，而且是一个非常昂贵的付费服务。但是，你有类似的演示吗？谢谢。好吧，很抱歉，这是一个借口。如果你不能在页面上放一个小片段，那么很抱歉，不值得回答。这是必要的。firefox inspect只提供你正在查看的dom区域的html部分。现在真的没有什么借口了。是dom访问速度慢，而不是你的循环。与dom操作相比，循环是微不足道的。你必须用数组进行重构。推送字符串，然后在最后加入并将一个大文本结果放入dom中。有一次我以为是dom，但没有看到不同的方式，对吗请更详细地解释一下？谢谢。每次循环迭代您都要使用dom。相反，如果可以像在定义的大区域周围画一个正方形那样完整地创建html，这就是方法。您必须在示例中显示您的dom，以便我根据渲染c的方式显示特定的方法a不能从页面复制粘贴或创建演示，因为这太复杂，而且是一项非常昂贵的付费服务。但是，你有类似的演示吗？谢谢。好吧，很抱歉，这是一种逃避。如果你不能在页面上放一个小片段，那么很抱歉，不值得回答。这是必要的。firefox inspect只提供了t中的html部分您正在查看的dom区域。这些天真的没有任何借口。正如在评论中所指出的，与性能测试记录的dom访问相比，这是微不足道的。我还测试了该方法：速度更快，但您仍然因为提供了一个非常易于理解和易于实现的答案而获得了荣誉，非常感谢。正如在注释，与您的性能测试记录的DOM访问相比，这是次要的。我还测试了该方法：速度更快，但您仍然因为提供了一个非常易于理解和易于实现的答案而获得了荣誉，非常感谢。