快速查看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);