Representación de retraso del elemento dom al cambiar las propiedades

Actualmente me encuentro con un problema de rendimiento al actualizar propiedades en muchos elementos dom a la vez. Parece que cada vez que cambio una propiedad, el elemento dom se vuelve a renderizar. ¿Hay alguna manera de que pueda retrasar la representación de los elementos hasta que todas mis actualizaciones hayan tenido lugar? Parece ser mucho más lento en FF 3 & 3.5 que IE 7 & 8 que va en contra de lo que esperaba.Representación de retraso del elemento dom al cambiar las propiedades

Un ejemplo de lo que estoy haciendo es a continuación.

var t; 

for (var i = 0; i < tiles.length; i++) { 
    t = tiles[i]; 
    t.width = '100'; 
    t.height = '100'; 
}

El problema es que el número de elementos en "teselas" puede ser de hasta 100 elementos dom. Que es donde realmente se muestran los problemas de rendimiento.

Fuente

2009-09-08 Alex

Estoy de acuerdo con @Crimson pero creo que será mejor ocultar el elemento primario de todos los elementos que está actualizando y si no tienen un elemento primario exclusivo, intente crear uno.

De esa manera sólo dos reflows ocurrirá, uno Cuando se oculta la baldosas contenedor, y otra cuando termine la manipulación del elemento y se muestran de nuevo.

Fuente

2009-09-08 05:16:20 CMS

Impresionante voy a probarlo. – Alex

Si la preocupación es acerca de los reflows, ¿por qué no utilizar la visibilidad: hidden. Esto mantendrá los elementos donde están. –

visibilidad: oculto no parece tener el mismo rendimiento. – Alex

Declarar pantalla: ninguna para cada tesela antes de realizar cambios y mostrar: bloquear cuando se hayan realizado todos los cambios.

Fuente

2009-09-08 05:10:34

Para evitar el flash, puede reemplazar el elemento primario con un clon de sí mismo y luego trabajar con el elemento primario original fuera del documento. Luego, cuando haya terminado, puede reemplazar el clon con el original:

var parent = /* define parent here */; 
var clone = parent.cloneNode(true); 

parent.parentNode.replaceChild(clone, parent); 

/* Do stuff with parent and its childNodes... */ 

clone.parentNode.replaceChild(parent, clone);

Fuente

2009-09-08 06:19:49 James

Esto parece una excelente manera de lograr lo que quiero en esta pregunta http://stackoverflow.com/questions/16796105/avoiding-flicker-in-transition-involving-hiding-showing-and-translate3d. – oligofren

¿Por qué no solo trabajar? en el clon?Entonces solo tienes una operación 'replaceChild'. – jdmichal

Parece ser mucho más lento en FF 3 & 3.5 que IE 7 & 8 que va en contra de lo que esperaba.

Actualmente, FF vuelve a calcular el diseño directamente en un cambio de propiedad. IE espera hasta que tenga que volver a dibujar la página, o accede a una propiedad como offsetWidth que necesita conocer el nuevo diseño. Esto no siempre solía funcionar correctamente.

El enfoque de CMS es bueno. Si todas las fichas son del mismo tamaño que en el ejemplo, hay una manera aún más rápida (que también funciona si las fichas no tienen un elemento primario común). Sólo tienes que dar toda una clase y cambiar todos a la vez el uso de CSS:

body.tiles100 .tile { width: 100px; height: 100px; } 

document.body.className= 'tiles100';

Si usted no sabe una selección predefinida de posibles tamaños de antelación, que tendría que escribir la regla de estilo de forma dinámica, a través de la list.styleSheets list. Sin embargo, esto es un poco molesto porque la interfaz de scripting en IE no coincide exactamente con el estándar DOM utilizado por otros navegadores. De nuevo.

Fuente

2009-09-08 10:47:27 bobince

Representación de retraso del elemento dom al cambiar las propiedades

Respuesta

Cuestiones relacionadas