Ist es in Ordnung, Dom vor dem Bereitschaftszustand zu manipulieren?

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

Frage

Auf diese Weise verwalte ich im Allgemeinen die progressive Verbesserung und halte gleichzeitig das Erlebnis sauber, aber wie sicher ist es?Gibt es möglicherweise eine Rennbedingung und das funktioniert nicht?

Stellen Sie sich das einfache abstrakte Szenario vor: Sie möchten etwas anders anzeigen, wenn Sie Javascript-Unterstützung haben.Im Allgemeinen werde ich Folgendes tun:

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

Viele behaupten möglicherweise, Sie sollten ein Framework verwenden, auf ein domready-Ereignis warten und dort Änderungen vornehmen.Es kommt jedoch zu einer erheblichen Verzögerung, wenn das „Test“-Element bereits vor dem Ende des Dokuments gerendert wurde und das CSS bereit ist und ein Domready ausgelöst wird.Dadurch entsteht ein merkliches Flackern des „Originals“.

Ist dieser Code anfällig für Fehler aufgrund von Rennbedingungen?Oder kann ich garantieren, dass ein Element erkennbar und änderbar ist, wenn es vor dem Skript vorhanden ist?

Dank im Voraus.

War es hilfreich?

Lösung

Sie können es, aber es gibt Probleme damit.

Zunächst einmal: Wenn Sie im IE versuchen, einen Knoten zu manipulieren, der nicht geschlossen wurde (z. B.BODY vor seinem Close-Tag, das sich unter Ihrem JS befinden sollte), dann kann der IE-Fehler „OPERATION ABORTED“ auftreten, der zu einer leeren Seite führt.Die Manipulation eines Knotens umfasst das Anhängen von Knoten, das Verschieben von Knoten usw.

In anderen Browsern ist das Verhalten nicht definiert, sie verhalten sich jedoch normalerweise wie erwartet.Das Hauptproblem besteht darin, dass Ihre Seite im Zuge der Weiterentwicklung möglicherweise unterschiedlich geladen/analysiert/ausgeführt wird.Dies kann dazu führen, dass ein Skript ausgeführt wird, bevor ein Browser definiert, dass referenzierte Elemente tatsächlich erstellt und für die DOM-Manipulation verfügbar gemacht wurden.

Wenn Sie versuchen, die vom Benutzer wahrgenommene Leistung zu verbessern (d. h.Bissigkeit).Ich empfehle Ihnen dringend, diesen Weg zu meiden und über eine Aufhellung Ihrer Seiten nachzudenken.Sie können Yahoos YSlow/Googles Page Performance Firebug verwenden, um Ihnen den Einstieg zu erleichtern.

Googles Page Speed

Yahoos YSlow

Andere Tipps

Sie können den DOM manipulieren, bevor es vollständig geladen ist, aber es kann riskant sein. Sie können natürlich nicht garantieren, dass das Bit des DOM Sie versuchen tatsächlich zu manipulieren existiert noch, so dass der Code kann zeitweise fehlschlagen.

Solange Sie nur Knoten ändern, die den Skriptblock vorangestellt werden (dh den schließende Tag des Knotens vorangeht das Starttag des Skripts), Sie sollten keine Probleme auftreten.

Wenn Sie sicherstellen möchten, dass die Operation erfolgreich, wickeln Sie den Code in einem try...catch Block und rufen Sie es erneut über setTimeout() bei einem Fehler.

In Viajeros.com habe ich eine Ladeanzeige seit 8-9 Monaten arbeiten, und ich habe keine Probleme so weit. Es sieht wie folgt aus: 

<body>

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

Zugriff auf das DOM vorzeitig Ausnahmen in IE wirft 5 und Navigator 4.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top