Podría alguien demostrarme que el consejo dado here (copiado abajo) con respecto a la eliminación de los elementos DOM antes de modificar y luego volver a la inserción de ellos es cada vez más rápido.el rendimiento de JavaScript - Dom Reflujo - Google artículo
Por probar, me gustaría ver algunas figuras. Es genial que investiguen esto, pero creo que el artículo es muy débil sin incluir detalles sobre cuál es realmente el 'problema' y cómo la solución lo soluciona en términos de velocidad (como el título del artículo Speeding up JavaScript)
The artículo ....
Out-of-the-flujo DOM Manipulación
Este modelo nos permite crear múltiples elementos e insertarlos en el DOM desencadenar una sola reflujo. Utiliza algo llamado DocumentFragment. Creamos un DocumentFragment fuera del DOM (por lo tanto, está fuera del flujo). Luego creamos y agregamos múltiples elementos a esto. Finalmente, movemos todos los elementos en DocumentFragment al DOM pero activamos un solo reflujo. El problema
Vamos a hacer una función que cambia el atributo className para todos los anclajes dentro de un elemento. Podríamos hacer esto simplemente iterando a través de cada ancla y actualizando sus atributos href. El problema es que esto puede causar un reflujo para cada ancla.
function updateAllAnchors(element, anchorClass) {
var anchors = element.getElementsByTagName('a');
for (var i = 0, length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
}
La solución
Para resolver este problema, podemos eliminar el elemento del DOM, actualizar todos los anclajes, y luego insertar el elemento donde estaba. Para ayudar a lograr esto, podemos escribir una función reutilizable que no solo elimine un elemento del DOM, sino que también devuelva una función que insertará el elemento nuevamente en su posición original.
/**
* Remove an element and provide a function that inserts it into its original position
* @param element {Element} The element to be temporarily removed
* @return {Function} A function that inserts the element into its original position
**/
function removeToInsertLater(element) {
var parentNode = element.parentNode;
var nextSibling = element.nextSibling;
parentNode.removeChild(element);
return function() {
if (nextSibling) {
parentNode.insertBefore(element, nextSibling);
} else {
parentNode.appendChild(element);
}
};
}
Ahora podemos utilizar esta función para actualizar las anclas dentro de un elemento que está fuera-de-la-flujo, y sólo desencadenar un reflujo cuando eliminamos el elemento y cuando insertamos el elemento.
function updateAllAnchors(element, anchorClass) {
var insertFunction = removeToInsertLater(element);
var anchors = element.getElementsByTagName('a');
for (var i = 0, length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
insertFunction();
}
Niza extensión sin embargo, ambos ejemplos parecen hacer la misma cantidad de redibujados para mí. Cualquier posibilidad de que puedas dar una demostración en pastebin.me :) – redsquare
Admitiré que la extensión ralentiza mucho las cosas, por lo que a veces puede ser difícil ver la diferencia en operaciones computacionalmente pesadas, p. Zoom de Google Maps. – Alex