Va bene manipolare dom prima dello stato pronto?

StackOverflow https://stackoverflow.com/questions/1222849

Domanda

Questo è generalmente il modo in cui gestisco il miglioramento progressivo mentre mantengo pulita l'esperienza, ma quanto è sicura? c'è un potenziale per una condizione di gara e questo non funziona?

Immagina il semplice scenario astratto, vuoi mostrare qualcosa di diverso se hai il supporto javascript .. questo è generalmente quello che finirò per fare: 

<div id="test">original</div>
<script type="text/javascript">
    var t = document.getElementById('test');
    t.innerHTML = 'changed';
</script>

Molti potrebbero sostenere che dovresti usare un framework e attendere un evento domready, e fare delle modifiche lì .. tuttavia c'è un ritardo significativo in cui l'elemento 'test' sarà già stato reso prima della fine del documento e del css sono pronti e si innesca già un domino .. provocando così un notevole sfarfallio di "originale".

Questo codice è soggetto a guasti alle condizioni di gara? o posso garantire che un elemento sia rilevabile e modificabile se esiste prima della sceneggiatura?

Grazie in anticipo.

È stato utile?

Soluzione

Puoi, ma ci sono problemi che lo circondano.

Prima di tutto, in IE se si tenta di manipolare un nodo che non è stato chiuso (ad es. BODY prima del suo tag di chiusura che dovrebbe essere sotto il proprio JS), è possibile riscontrare IE "OPERATION ABORTED " errore che si tradurrà in una pagina vuota. La manipolazione di un nodo include l'aggiunta di nodi, lo spostamento di nodi, ecc.

In altri browser il comportamento non è definito, tuttavia di solito si comportano come ci si aspetterebbe. Il problema principale è che, man mano che la tua pagina si evolve, la pagina potrebbe caricarsi / analizzare / funzionare in modo diverso. Ciò può causare l'esecuzione di alcuni script prima che un browser definisca gli elementi di riferimento effettivamente creati e resi disponibili per la manipolazione del DOM.

Se si sta tentando di migliorare le prestazioni percepite dall'utente (ovvero la velocità). Consiglio vivamente di evitare questo percorso e cercare di alleggerire le tue pagine. Puoi utilizzare Yahoo YSlow / Google Page Performance Firebug per aiutarti a iniziare.

Speed ??Page di Google

YSlow di Yahoo

Altri suggerimenti

Puoi manipolare il DOM prima che sia stato caricato completamente, ma può essere rischioso. Ovviamente non puoi garantire che il bit del DOM che stai tentando di manipolare esiste ancora, quindi il tuo codice potrebbe fallire in modo intermittente.

Fintanto che modifichi solo nodi che precedono il blocco di script (ovvero il tag di chiusura del nodo precede il tag di apertura dello script), non dovresti riscontrare alcun problema.

Se si desidera assicurarsi che l'operazione abbia esito positivo, avvolgere il codice in un blocco try ... catch e richiamarlo nuovamente tramite setTimeout () in caso di errore.

In Viajeros.com ho un indicatore di caricamento funzionante da 8-9 mesi e finora non ho avuto problemi. Sembra così: 

<body>

<script type="text/javascript">
    try {
        document.write('<div id="cargando"><p>Cargando...<\/p><\/div>');
        document.getElementById("cargando").style.display = "block";
    } catch(E) {};
</script>

L'accesso al DOM prematuramente genera eccezioni in IE 5 e Navigator 4.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top