Qual è il modo più efficiente per modificare gli elementi DOM e limitare il reflow?

Question

Quando si lavora con un'interfaccia utente molto dinamica (si pensi all'applicazione per pagina singola) con librerie JS potenzialmente grandi, visualizzare modelli, convalida, ajax, animazioni, ecc., Quali sono alcune strategie che consentono di ridurre o ridurre il tempo trascorso dal browser reflow?

Per esempio, sappiamo che ci sono molti modi per realizzare un cambiamento di dimensioni DIV, ma ci sono tecniche che dovrebbero essere evitate (da un punto di vista di reflow) e come differiscono i risultati tra i browser?

Ecco un esempio concreto:

Dato un semplice esempio di 3 modi diversi per controllare la dimensione di un DIV quando la finestra viene ridimensionata, quali di questi devono essere utilizzati per ridurre al minimo rimborsi?

http://jsfiddle.net/xDaevax/v7ex7m6v/

//Method 1: Pure Javascript 
function resize(width, height) { 
    var target = document.getElementById("method1"); 
    target.setAttribute("style","width:" + width + "px"); 
    target.setAttribute("style", "height:" + height + "px"); 
    console.log("here"); 
} // end function 
window.onresize = function() { 
    var height = (window.innerHeight/4); 
    var width = (window.innerWidth/4); 
    console.log(height); 
    resize(height, width); 
} 
//Method #3 Jquery animate 
$(function() { 
    $(window).on("resize", function(e, data) { 
     $("#method3").animate({height: window.innerHeight/4, width: window.innerWidth/4}, 600) 
    }); 
}); 

Answer 1

È meglio cercare di evitare di modificare elementi DOM quando possibile. A volte è possibile evitare il reflow attenendosi alle proprietà CSS o, se necessario, utilizzando i CSS 'transform s in modo che l'elemento stesso non sia influenzato affatto, ma lo stato visivo è appena cambiato. Paul Lewis e Paul Irish entrano nei dettagli sul perché questo è il caso in this article.

Questo approccio non funziona in tutti i casi, perché a volte è necessario modificare l'elemento DOM effettivo, ma per molte animazioni e simili, transform s offre le migliori prestazioni.

---

Se le operazioni richiedono reflow, è possibile ridurre al minimo l'effetto che ha da:

• Mantenere la profondità DOM piccola
• Mantenere il selettore CSS semplice (e il salvataggio di quelle complicate ad una variabile in JavaScript)
• Evitare stili inline
• Evitare tabelle per il layout
• Evitare Javascri pt ogni volta che è possibile

Nicole Sullivan ha pubblicato un pretty good article sull'argomento che visualizza maggiori dettagli sul reflow del browser e sui ridisegni.

Se in realtà stai cambiando il DOM, non le proprietà DOM, è meglio farlo in blocchi più grandi piuttosto che in quelli più piccoli like this Stack Overflow post suggerisce.

---

Nell'esempio che hai fornito, il secondo metodo è il migliore perché utilizza le proprietà CSS senza bisogno di JavaScript. I browser sono abbastanza buoni per il rendering di elementi le cui dimensioni e posizioni sono determinate esclusivamente dai CSS. Tuttavia, non è sempre possibile ottenere l'elemento in cui dobbiamo essere con puro CSS.

Il metodo peggiore è di gran lunga il terzo perché l'animazione di jQuery è terribilmente lenta, ma far sì che il fuoco venga ridimensionato fa sì che gli animatori si sovrappongano l'uno sull'altro in modo che rimangano molto indietro se si ridimensiona molto a tutti .Puoi prevenire questo impostando un timeout con un booleano per verificare se è già stato attivato o, più preferibilmente, non utilizzare l'animazione di jQuery per farlo, ma invece usa jQuery .css() poiché la funzione di ridimensionamento si attiva così spesso che sarà sembra comunque animato.