javascript - elemento - innerhtml jquery ejemplos
¿Por qué quitar elementos lleva más tiempo que agregar elementos? (4)
Tengo una tabla con muchas filas (como 10.000).
(Nota: me doy cuenta de que no tiene sentido tener una mesa tan grande, pero me gustaría entender el comportamiento a continuación).
Cuando reciba nuevos datos, primero quiero borrar las filas. Por extraño que parezca, limpiar la mesa lleva mucho más tiempo que construir las filas desde cero. Borrar las filas de la tabla con html("") o sin formato JS innerHTML = "" toma 1.5 minutos, mucho más que compilar las propias filas, lo que toma menos de un segundo.
Así que mi pregunta:
- ¿Por qué quitar elementos lleva más tiempo que agregarlos? ¿Qué pasa ''tras bambalinas''?
(Tenga en cuenta que mi pregunta es por qué , no estoy buscando posibles soluciones).
ACTUALIZACIÓN :
Noté que la fila y las celdas de la tabla tienen aplicadas definiciones flotantes, y cuando quito el flotador, la tabla se vacía en una instancia.
Todavía me gustaría entender por qué el flotador hace que la eliminación de las filas sea mucho más lenta.
Aquí un violín: https://jsfiddle.net/maaikeb/t5pduuue/
En Chrome, se tarda 25 segundos en vaciar la tabla y solo 23 ms en agregarla al DOM.
* Leí las publicaciones a continuación, pero hablan más sobre posibles soluciones y menos sobre por qué quitar los elementos lleva más tiempo que agregarlos, lo que realmente sucede cuando los eliminas
jQuery empty es muy lento
jQuery empty es muy lento
¿Cuál es la mejor manera de eliminar una fila de la tabla con jQuery?
Borrando filas de tablas en javascript
jquery: la forma más rápida de eliminar todas las filas de una tabla muy grande
En lugar de hacer un bucle en todo el DOM quitar y volver a renderizar, puede usar hide () y show (). Lo que es rápido y bueno para el rendimiento ya que recuperar la columna oculta también es muy fácil. Por favor encuentre útil el snipet.
//did based on checkbox here update to ur requirement hide() callback remains same.
$("input:checkbox:not(:checked)").each(function() {
var column = "table ." + $(this).attr("name");
$(column).hide();
});
$("input:checkbox").click(function(){
var column = "table ." + $(this).attr("name");
$(column).toggle();
});
td, th {
padding: 6px;
border: 1px solid black;
}
th {
background-color: #f0eae2;
font-weight: bold;
}
table {
border: 1px solid black;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<p><input type="checkbox" name="first_name" checked="checked"> First Name
<input type="checkbox" name="last_name"> Last Name
<input type="checkbox" name="email" checked="checked"> Email</p>
<table id="report">
<thead>
<tr>
<th class="first_name">First Name</th>
<th class="last_name">Last Name</th>
<th class="email">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first_name">Larry</td>
<td class="last_name">Hughes</td>
<td class="email">[email protected]</td>
</tr>
<tr>
<td class="first_name">Mike</td>
<td class="last_name">Tyson</td>
<td class="email">[email protected]</td>
</tr>
</tbody>
Puede borrar la tabla asignando a su HTML interno el valor de la cadena vacía. Luego, no pasará por cada uno de los elementos de la fila para encontrar el encabezado, el cuerpo o la fila para eliminarlo.
$ ("# yourtableid"). html ("");
Si pregunta por qué vaciar la mesa debería llevar 1000 veces más tiempo que agregarla, bueno, simplemente no debería: eso es un error.
Puede encontrar importantes diferencias de rendimiento según el navegador, su versión, la versión de jQuery o el sistema operativo, pero 25s vs 23ms es demasiado. Parece que en algún lugar golpeas una operación O(N^2) . Por menos que eso, la gente abre los tickets y los desarrolladores del navegador los reconocen.
De todos modos, eliminar elementos no siempre es más rápido que agregarlos. Nuestra intuición dice que destruir debe ser más rápido que crear, pero eso no es necesariamente cierto cuando se trata de manipular el DOM. Tanto jQuery como el navegador deben realizar trabajos adicionales para eliminar elementos.
Si observa la implementación actual (3.2.1) de la función jQuery append() verá que lo que hace básicamente es usar el método JS nativo appendChild() . Por otro lado, la función jQuery empty() ( html() usa empty() ) necesita recorrer todos los elementos internos y eliminar los datos relacionados (por ejemplo, eventos) de cada uno de los elementos internos para evitar pérdidas de memoria.
Y, si usa solo JS de vainilla, el navegador aún necesita verificar un montón de cosas al eliminar elementos. Si desea ingresar a las partes internas del navegador, puede verificar este problema de Firefox .
No importa si removeChild() , innerHtml o textContent() , el navegador siempre necesita volver a calcular los estilos y el diseño: marque este en Chromium .
Este tipo de errores son comunes. Si busca en Chromium problemas con las palabras clave "removeChild" y "slow", obtendrá una lista bastante larga . A veces van y vienen debido a correcciones que introducen regresiones, como en este caso con elementos flotantes. Este otro puede ser especialmente interesante para usted, porque prueba que algunos errores no están conectados con el método que elige para eliminar los elementos y porque, como en su caso, aparece cuando se aplican reglas CSS complejas a esos elementos (sugiriendo que el navegador provocó un reflujo).
No pude reproducir su problema ni en Firefox ni en Chrome, por lo que no puedo explicar la razón exacta de los 25 segundos o 1,5 minutos, pero realmente parece un error corregido en versiones más recientes. Si aún tiene la misma versión anterior y puede reproducirla, valdría la pena comprobar si eliminar los elementos en orden inverso (a partir de lastChild ) ayuda. Tal vez evite recalcular la posición de todos los hermanos flotantes después del que quitó.
La próxima vez quizás quieras abrir un ticket y seguir cómo encuentran el error y repararlo. ¡Satisfará tu curiosidad y podrás aprender mucho sobre los aspectos internos del navegador!
Supongo que tienes un mal rendimiento en IE.
Yo diría que eso se debe a que el método $.empty llama removeChild en un bucle para cada elemento eliminado de la tabla y ese método siempre tuvo un mal desempeño en IE.
No importa lo que haga con un DOM grande, tendrá un mal rendimiento en IE. Este artículo en appendChild en DOM grande en IE es un ejemplo de cómo la comunidad todavía está aturdida por este simple hecho. :)