Búsqueda de sitios web

jquery - ¿Manera rápida de marcar 2000 casillas en Javascript?


Tengo una página web con un par de miles de casillas de verificación, y me gustaría agregar una función de "Marcar todo". Desafortunadamente, mi implementación actual hace que Google Chrome se congele durante al menos cinco segundos.

Aquí está lo que he intentado (usando jQuery):

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

Creo que el Javascript en sí se ejecuta rápido, sin embargo, el navegador podría estar teniendo problemas para renderizar todas las actualizaciones tan rápido. ¿Podría estar haciendo otra cosa?

Aquí hay un ejemplo simplificado: https://www.msu.edu/~weinjare/checkboxes.html

También he ejecutado el Analizador de rendimiento integrado en Chrome y obtuve estos resultados:

Respuesta #1

Acceder directamente a los atributos del DOM puede ser más rápido, aunque mi suposición es que no será significativamente más rápido:

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

Pero como dices, el mayor problema probablemente sea el renderizado. Podrías intentar ejecutar en lotes dentro de setIntervals de 0 milisegundos. Esto no acelerará nada, pero al menos detendrá el "cuelgue":

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

Respuesta #2

Dejando de lado la implementación práctica de esta solución, Chrome parece ser mucho más rápido si primero vacías el contenedor de casillas de verificación, generas todo como una cadena con el atributo checked y lo vuelves a agregar al DOM. Así que en tu ejemplo sería (solo necesitas rodear las casillas de verificación con un div con id boxes)

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