¿Hay alguna forma de encapsular varios comandos de manipulación de DOM en una transacción para que el contenido no "parpadee"? Algo como esto:HTML DOM ¿Transacción de dibujo en Javascript?
window.stopDrawing(); // start transaction
$("#news").append("<div>a new news item</div>");
// ... do something more
$("#news").css("top", "-150px");
window.startDrawing(); // stop transaction
Cada vez que debe actualizar un gran conjunto de elementos que acabamos de configurar una función que incluye todas las operaciones, llame mozRequestAnimationFrame (o webkitRequestAnimationFrame), sólo después de que su función se haya ejecutado completamente va a sacar sus cambios a la pantalla.
Más en: https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame
En realidad, hay una versión estandarizada de esta API llamada [requestAnimationFrame] (http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/Default.html) – sternr
Esa función no existe en Firefox o Chrome (no lo hago) t saber acerca de IE 9) porque es experimental, es por eso que recomendé usar la versión prefijada – Shedokan
Creo navegadores están rediseñando el documento sólo cuando la secuencia de comandos vuelve al bucle incluso, por lo que no rinde nada hasta el final de su script.
De todos modos, algunas operaciones pueden obligar al navegador a realizar algunas operaciones costosas, como volver a calcular las dimensiones de los elementos en el documento (por ejemplo, al recuperar las dimensiones de un elemento después de algunas manipulaciones DOM). Por lo tanto, debe hacer las manipulaciones DOM fuera de documento tanto como sea posible.
Si tiene que realizar muchas manipulaciones en algún elemento, puede ser más económico para eliminarlo del árbol de documentos, hacer sus manipulaciones y volverlo a agregar al árbol.
Los navegadores (los más nuevos) hacen esto ya, internamente, en la medida de lo posible. Sin embargo, no hay un control explícito. Si publica más sobre una situación particular que está viendo, alguien puede sugerir una optimización. – Pointy