快速查看Javascript中的2000个复选框？

Question

我的网页上有几千个复选框，并想添加“全部检查”功能。不幸的是，我目前的实施方案将谷歌浏览器挂起至少五秒钟。

这是我尝试过的（使用jQuery）：

$('input').attr('checked', true); // as well as...
$('input').click();

我相信实际的Javascript运行速度很快，但浏览器可能无法快速呈现所有更新。我可以做别的吗？

以下是一个简化示例：https://www.msu.edu/~weinjare/checkboxes.html

我还运行了内置于Chrome的Profiler并获得了以下结果：

Answer 1

直接访问DOM属性可能更快，但我的猜测是它不会明显更快：

var els = $('input');
for (var i = 0; i < els.length; i++) {
    els[i].checked = true;
}

但正如你所说，最大的问题可能是渲染。您可以尝试在0毫秒的setIntervals内批处理执行。这不会加速任何事情，但至少会阻止“悬挂”：

var els = $('input'), i = 0;
var interval = setInterval(function () {
    var batchLen = i + 100 > els.length ? els.length : i + 100;
    for (; i < batchLen; i++) {
        els[i].checked = true;
    }
    if (i === els.length) clearInterval(interval);
}, 0);

Answer 2

此解决方案的实际实现除非首先清空复选框容器，然后将该批次生成为检查了属性的字符串并追加到DOM，否则Chrome似乎要快得多。所以在你的例子中它将是（只需要用带有id框的div包围复选框）

<script> 
  var checkAll = function() {
  html ="";
   $("#boxes").empty();
   for (i=0;i<2000;i++) {
   html+="<input type=checkbox checked>";
  }
  $("#boxes").append(html);
   return false;}
  var uncheckAll = function() { html ="";
   $("#boxes").empty();
   for (i=0;i<2000;i++) {
   html+="<input type=checkbox>";
  }
  $("#boxes").append(html);
   return false;};
</script> 

Answer 3

Firefox需要大约0.5秒。您确定问题是Google Chrome吗？

Answer 4

DOM操作非常慢，因为您已经注意到了......为避免占用浏览器，您可以做的就是使用方便的“setTimeout”功能，它可以让您延迟执行该功能。这样您就可以将线程返回到浏览器以使其响应...

  var checkAll = function() {
    var inputs = $('input');
    var n = inputs.length;
    for (var i = 0; i < n; i++) {
      (function(i){
        setTimeout(function(){
          $(inputs.get(i)).attr('checked', true);
        },0);
      })(i);
    }
    return false;
  };

Answer 5

我不是Chrome的忠实粉丝。我试过旧版的chrome＆amp;我有jquery。

官方建造2200 Mozilla / 5.0（Windows; U; Windows NT 5.2; en-US）AppleWebKit / 525.13（KHTML，与Gecko一样）Chrome / 0.2.149.30 Safari / 525.13

jQuery 1.4.2

在0.5秒内检查复选框。你用的是哪个版本？

Answer 6

尝试：

$('input[type="checkbox"]').attr('checked', true);