Javascript efficiente per modifiche DOM

Question

Dire, ho un file HTML che voglio elaborare utilizzando Javascript. Per esempio:

• aggiungere alcuni elementi DOM, come span o div involucri.
• Modificare lo stile del documento un po ', come le dimensioni del carattere di base, l'altezza della linea, ecc.
• Utilizzare un hyphentor per aggiungere ­ entità.

Quale sarebbe il modo più efficiente per farlo, cioè mi piacerebbe farlo con una quantità minima di riflessi.

Il caso ideale sarebbe avere il codice JS eseguito anche prima del primo layout. È possibile? Lo so, è generalmente una cattiva idea eseguire script costosi prima che la pagina sia stata visualizzata per fare in modo che la pagina sembrasse vuota per un po 'di tempo ed è davvero una brutta esperienza. Tuttavia, avrò bisogno di questo per lavorare offline e questo non sarebbe un problema per il mio progetto.

Oppure, c'è un modo per fare tutte le modifiche dom in un mazzo, cioè un riflusso da attivare dopo che tutte le modifiche sono terminate?

Answer 1

Ci sono diversi modi. L'obiettivo principale di tutti è che si finisce per causare un singolo - o almeno il meno possibile - reflows/repaints.

off-DOM elemento

si può lavorare con gli elementi senza aggiungere al DOM, e poi basta aggiungere tutto insieme una volta che tutto è impostato.

L'unico problema è se il codice deve fare riferimento alle dimensioni dell'offset, poiché gli elementi non ancora presenti nel DOM non ne contengono.

var container = document.createElement('section'); //not in the DOM yet 
//do some extensive work here to prepare the doc 
document.body.appendChild(container); //now we go to the DOM, causing a single re-paint 

frammento Doc

A più formalizzato, e possibile, ampliare, variazione su questo tema sarebbe document fragments, che portano un miglioramento delle prestazioni (a quanto pare). Sono effettivamente un secondo DOM separato che non ha display.

String

Probabilmente il più lesto di tutti di questi sarebbe per costruire il documento come una stringa. L'ovvia conseguenza è che non è possibile utilizzare i metodi DOM su di esso, ma se si è soddisfatti della gestione delle stringhe e di REGEX (non ideale in HTML, ovviamente), potrebbe essere opportuno considerarlo.

Infine, se la velocità è essenziale e si ha un sacco di calcolo o di gestione delle stringhe da fare, si potrebbe voler sfruttare i web worker. Questi non possono parlare direttamente con il DOM, ma è possibile esternalizzare le attività e, soprattutto, funzionano in modo asincrono su un thread separato.

Answer 2

Credo che dipenda dal browser decidere quindi di ridisporre il contenuto. E cercano di non farlo finché l'esecuzione dello script non è finita. È importante notare qui che quando si aggiunge, ad esempio, div al corpo del documento, si causano ricalcoli del DOM. E per questo è possibile utilizzare documentFragment per aggiungere elementi e quindi frammentarsi nel corpo. Anche se nel tuo caso capita di dover aggiungere 1 elemento a contenitori diversi, non sarà di grande aiuto.

lettura Ulteriori frammento di documento: http://ejohn.org/blog/dom-documentfragments/

Answer 3

Penso che tu non possa lavorare sullo stile o sugli elementi DOM prima che la pagina sia caricata. Prima viene caricato, quindi si inizia a modificare la pagina. Vorrei caricare la pagina in modo nascosto modificarla e mostrare. modi per nascondere:

1. tutto caricare al di fuori dello schermo coordinate X/Y, allora u metterlo a 0,0
2. DIV quali dati il ​​contenuto della pagina hanno uno stile: display: none o visibility: hidden http://www.w3schools.com/css/css_display_visibility.asp assegno qui per dettagli.
3. Può caricare una pagina all'interno di 1 pixel iframe, u come proprietario della pagina padre ha il controllo sulla pagina figlio. Dopo aver terminato le tue modifiche ridimensiona iframe, nascondi la sua cornice.
4. Utilizzare l'indice Z e inserire DIV full size non trasparente nero o bianco che nasconde tutto sotto. Rimuoverlo quando si è pronti

Scegli ciò che meglio si adatta al tuo stile.

Answer 4

Rimuovere documentElement da document, modificarlo e aggiungerlo a document.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>...</title>   
    </head> 
    <body> 
     <script type='text/javascript'> 
var docElem = document.documentElement, 
    parentNode = docElem.parentNode, 
    nextSibling = docElem.nextSibling; 
parentNode.removeChild(docElem); // reflow 
// ... 
docElem.lastChild.appendChild(docElem.ownerDocument.createElement('hr')); 
// ... 
parentNode.insertBefore(docElem, nextSibling); // reflow 
     </script> 
    </body> 
</html> 

Questo attiva due reflussi e da zero a due ripetizioni extra.

jsFiddle