2010-10-13 6 views
7

Wenn ich JavaScript-Code im unteren Bereich halte oder JavaScript-Code in innerhalb document.ready halten, sind beide gleich?Wenn ich JavaScript unten halte oder JavaScript in <head> in document.ready halte, sind beide dasselbe?

Ich bin verwirrt zwischen diesen beiden Methoden, http://api.jquery.com/ready/ und http://developer.yahoo.com/performance/rules.html#js_bottom.

Gibt es irgendeinen Vorteil, wenn ich JavaScript-Code unten (kurz vor </body>) einfügen möchte, selbst wenn ich den Code drin halte.

$(document).ready(function() { 
     // code here 
    }); 

Da JavaScript angebracht in

<head> 
    <script type="text/javascript" src="example.js"></script> 
</head> 

Antwort

1

Sie sind nicht das Gleiche wie das ready Ereignis wird ausgelöst, wenn der DOM-Baum gebaut wurde, während Skripte am Ende der Seite tatsächlich ausführen kann nachher.

In beiden Fällen sind sie beide sichere Einstiegspunkte für die Ausführung Ihrer App.

0

Position von <script> Tag beziehen Sie nicht Ihr Skript ein, wenn Sie document.ready verwenden. Es scheint, JavaScript wird schneller geladen, wenn vor </body> platziert, aber ich bin mir nicht sicher.

2

Sie werden alle gleich in Bezug auf Sie auf den Code zugreifen laden.

Die Unterschiede sind in der wahrgenommenen Geschwindigkeit des Ladens der Seite. Wenn das Javascript zuletzt ist, blockiert es kein CSS, das versucht wird heruntergeladen zu werden, welches immer an der Spitze sein sollte, und blockiert keine Bilder, die heruntergeladen werden müssen.

Browser fragen nur nach Elementen, wie sie sie im HTML finden, aber sie haben nur eine begrenzte Anzahl von Download-Streams (~ 10 in modernen Browsern), also wenn Sie viele Anfragen für Bilder/CSS und für JS etwas ist gehen zu verlieren und die wahrgenommene Geschwindigkeit/Benutzererfahrung der Seitenladung Ihrer Seite wird einen Schlag bekommen.

+0

Nicht nur * wahrgenommene * Geschwindigkeit - einige alte Browser, die * just.won't.die * in einen anderen (weniger parallelen) Modus zum Herunterladen fallen, sobald sie auf ein '

1

Die Yahoo! Die Entwickler-Website sagt, dass wenn Sie JavaScript am unteren Rand der Seite platzieren, es das Laden anderer Ressourcen durch den Browser nicht blockieren wird. Dadurch wird die Erstladung der Seite beschleunigt.

jQuery gibt eine Funktion an, die geladen werden soll, wenn die gesamte Seite geladen wurde.

Wenn Sie eine Funktion haben, die beim Laden der Seite ausgeführt wird, spielt es keine Rolle, ob Sie sie in einfügen oder am Ende der Seite, sie wird zur gleichen Zeit ausgeführt.

0

Auch mit dem Skript am Ende des HTML-Dokuments ist das DOM möglicherweise nicht vollständig geladen. Alle geschlossen Elemente über dem Skript wird in der Regel bereit sein, kann ein DOM-Ereignis in Eckfällen notwendig sein.

1

Es ist wichtig zu prüfen, was das JavaScript tatsächlich auf Ihrer Seite macht, wenn Sie sich entscheiden, wo Sie es ablegen sollen. In den meisten Fällen ist es aufgrund der Zeit, die zum Laden und Ausführen von JavaScript erforderlich ist, sinnvoller, am Ende der Seite platziert zu werden. Wenn das Seitenrendering jedoch von Ajax-Aufrufen oder Ähnlichem abhängt, ist dies möglicherweise nicht der Fall.

Hier ist eine good read zum Thema document.ready() nicht für alle JS geeignet.