Window.onload vs $(document).ready()

Question

Was sind die Unterschiede zwischen window.onload in JavaScript und $(document).ready() in jQuery?

Answer 1

Wenn Sie $ (Dokument) .ready (f) sagen, informieren Sie das Skriptmodul darüber, folgende Schritte auszuführen:

1. Das Objekt Dokument abrufen und pushen. Da es sich nicht im lokalen Bereich befindet, muss es eine Hashtabellensuche durchführen, um herauszufinden, wo sich das Dokument befindet. Glücklicherweise ist das Dokument global gebunden, daher handelt es sich nur um eine Suche.
2. Das Objekt $ finden und auswählen. Da es sich nicht im lokalen Bereich befindet, muss es eine Hashtabellensuche durchführen, die möglicherweise Kollisionen aufweist.
3. Das Objekt f im globalen Bereich finden, was eine weitere Hashtabellensuche erforderlich macht, oder das Funktionsobjekt pushen und initialisieren.
4. Die Methode ready des ausgewählten Objekts aufrufen, was eine Hashtabellensuche im ausgewählten Objekt erfordert, um die Methode zu finden und aufzurufen.
5. Fertig.

Im besten Fall handelt es sich hierbei um 2 Hashtabellensuchen, aber das ignoriert die aufwendige Arbeit, die von jQuery geleistet wird, wobei $ das Sammelsurium aller möglichen Eingaben für jQuery ist, sodass es wahrscheinlich eine weitere Zuordnung gibt, um die Abfrage an den richtigen Handler weiterzuleiten.

Alternativ könnten Sie dies tun:

window.onload = function() {...}

was folgendes bewirkt:

1. Das Objekt Fenster im globalen Bereich finden. Wenn der JavaScript-Code optimiert ist, wird er wissen, dass das Fenster nicht geändert wurde, daher ist das ausgewählte Objekt bereits vorhanden und es muss nichts weiter unternommen werden.
2. Das Funktionsobjekt wird auf den Operandenstapel verschoben.
3. Überprüfen, ob onload eine Eigenschaft ist oder nicht, indem eine Hashtabellensuche durchgeführt wird. Da es eine Eigenschaft ist, wird sie wie eine Funktion aufgerufen.

Im besten Fall kostet dieses Verfahren eine einzige Hashtabellensuche, die erforderlich ist, da onload abgerufen werden muss.

Idealerweise würde jQuery ihre Abfragen in Zeichenfolgen kompilieren, die eingefügt werden können, um das zu tun, was Sie möchten, ohne die Laufzeit-Despatching von jQuery. Auf diese Weise haben Sie die Möglichkeit, entweder

1. eine dynamische Despatching von jQuery wie heute durchzuführen.
2. jQuery Ihre Abfrage in reinen JavaScript-Code umwandeln zu lassen, der an eval übergeben werden kann, um das Gewünschte zu tun.
3. Das Ergebnis von 2 direkt in Ihren Code zu kopieren und die Kosten für eval zu umgehen.

Answer 2

Window.onload wird von der DOM-API bereitgestellt und besagt "Das Load-Event wird ausgelöst, wenn eine bestimmte Ressource geladen wurde".

"Das Load-Event wird am Ende des Dokument-Ladevorgangs ausgelöst. Zu diesem Zeitpunkt sind alle Objekte im Dokument im DOM, und alle Bilder, Skripte, Links und Unterfenster wurden geladen." DOM onload

Aber in jQuery wird $(document).ready() nur ausgeführt, wenn das Dokumentenobjektmodell (DOM) für die Ausführung von JavaScript-Code bereit ist. Dies beinhaltet keine Bilder, Skripte, IFrames etc. jQuery ready event

Also wird die jQuery ready-Methode früher als das DOM onload-Event ausgeführt.