Wird der Zweck von document.ready durch das Setzen von Javascript außer Kraft gesetzt?

26

Ich weiß, dass es empfohlen wird, Javascript am Ende der Seite zu platzieren, aber wenn ich jQuery verwende, hat dies nicht den Zweck, ausgeführt zu werden, während das DOM geladen wird?

Wenn ich zum Beispiel ein Dropdown-Menü habe, werden die Dropdowns erst angezeigt, wenn der gesamte Rest der Seite geladen wurde. Ich versuche auch, mit Blick auf progressive Verbesserungen zu entwickeln, sodass ich möglicherweise Elemente habe, die mit jQuery anstelle von CSS ausgeblendet werden (damit Nicht-JS-Benutzer sie sehen können).

Gibt es vielleicht ein fröhliches Medium?

javascript performance jquery

— Verärgerte Ziege
quelle

Ich habe das umgekehrte Problem. Ich habe ein Skript, das eine Seitenleiste erstellt und positioniert, aber leider wird die Seite gerendert, bevor mein Skript ausgeführt wird, was zu einem unschönen Ruckeln führt, wenn Seitenelemente an den neuen Positionen neu gezeichnet werden. Ist es möglich, das Rendern zu blockieren, bis mein Skript fertig ist, oder meine Größen- und Positionsangaben vor dem ersten Rendern auszuführen?

3

Gehört diese Frage nicht mehr zu StackOverflow?

— Marco Demaio

30

Document.ready wartet auf das Laden des DOM, bevor JavaScript ausgeführt wird (http://www.learningjquery.com/2006/09/introducing-document-ready).

Die Idee, es ganz nach unten zu setzen, bedeutet, dass der Rest der Seite immer noch zuerst geladen wird und nicht "hängt", wenn Ihr JS Probleme hat oder die Person eine langsame Verbindung hat.

Der JS läuft immer noch, wenn alles geladen ist, egal ob am Anfang oder am Ende.

— Callan
quelle

6

Wenn Sie JavaScript ganz nach unten setzen, wird der Inhalt der anderen Seite (insbesondere der Text) vor dem JavaScript geladen, sodass Benutzer nicht darauf warten, dass das JS geladen wird, wenn sie langsame Verbindungen haben.

Document.ready ist davon nicht betroffen, da dies aufgerufen wird, wenn der Browser das DOM für eine Seite vorbereitet hat. In jedem Fall muss erst noch alles geladen werden.

— Macha
quelle

3

Ein Skript kann erst verwendet werden, wenn der HTML-Code vollständig geladen wurde. Ein Skript kann das DOM erst ändern, wenn der HTML-Code geladen wurde. document.readyWartet auf das Laden des DOM. Es macht also keinen Sinn, wichtige Dinge wie Stylesheets aufzubewahren.

Platzieren Sie die Skripte am Ende der Seite (vor dem </body>Tag), um HTML und CSS so schnell wie möglich an den Benutzer weiterzuleiten. Der Browser kann die Seite viel schneller rendern und dann können Skripte geladen werden, anstatt dem Benutzer eine leere Seite zu hinterlassen, auf die er starren kann, während er auf das Herunterladen der Skripte wartet.

Während der Browser die Seite progressiv rendert, stoppt alles , wenn er auf ein Skript-Tag (dh eine externe Javascript-Datei) trifft . Skripte haben Vorfahrt - während ein Skript heruntergeladen wird, startet der Browser keinen weiteren Download. Das heißt, Bilder und Stylesheets sowie alle anderen parallelen Downloads werden auch auf anderen Hostnamen blockiert.

Der Nachteil des Platzierens von Skripten am Ende der Seite besteht darin, dass besonders schnelle Klicker in der Lage sind, mit Ihrer Site zu interagieren, bevor Javascript fertig ist, da die Seite gerendert wird, bevor Skripte initialisiert wurden.

Hinweis: Für Stylesheets gilt das Gegenteil : Stylesheets am unteren Rand der Seite blockieren das progressive Rendern, bis alle Stylesheets heruntergeladen wurden und in das Dokument HEADverschoben wurden, um das Problem zu beheben.

Es gibt einen tollen Trick, um Javascript zu laden, ohne dass der Benutzer warten muss. Sie können ein <script/>Element mit der DOM- createElement()Methode erstellen und es der Seite unmittelbar vor dem schließenden </body>Tag hinzufügen :

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

Der Browser lädt das js-Skript erst herunter, wenn das neue <script/>Element tatsächlich zur Seite hinzugefügt wurde. Sobald der Download abgeschlossen ist, interpretiert der Browser den darin enthaltenen Javascript-Code.

— Tom
quelle

1

Nicht ganz richtig. Skript kann das DOM ändern, bevor der gesamte HTML-Code geladen wird ... Tatsächlich blockieren Skripte deshalb, weil sie die Seite ändern können . In vielen Fällen müssen Entwickler ihr Verhaltensskript jedoch erst hinzufügen, wenn das DOM geladen ist.

— Scunliffe

1

Ja. Wenn Sie unten Skripte einfügen, wird doc.ready( DOMContentLoadedevent) nicht mehr benötigt - Ihr Skript wird ausgeführt, nachdem alle vorherigen DOMs trotzdem geladen wurden.

Da Skripte am Ende die Leistung verbessern (HTML-Analyse und das Laden von CSS und Bildern werden durch die Skripte nicht blockiert), empfehle ich, Skripte am unteren Rand zu platzieren, anstatt sie zu verwenden doc.ready.

— Kornel
quelle