Wo lege ich die Links zu meinen Javascript/jQuery-Dateien in meine HTML-Datei?

Question

Ich habe kürzlich festgestellt, dass einige (nicht alle) meiner JavaScript- und jQuery-Skripts nicht funktionieren würden, wenn ich den Link für die JS-Dateien nicht weiter unten auf der Seite, sondern im Kopfbereich für meine .css-Dateien.

Von dem, was ich verstehe, kann Javascript an beiden Orten gehen und es wird empfohlen, nicht in den Header gesetzt werden, da es auch den Ladeprozess der Seite verlangsamt. Zur gleichen Zeit, wenn ich es in den Body-Tag der HTML-Datei einfüge, sieht es etwas chaotisch aus und fragte mich, was die beste Vorgehensweise ist, um .js-Dateien an einem sauberen Ort zu platzieren. Sollte ich es immer ganz unten rechts vor dem End-Body-Tag setzen? Wie gehen professionelle Webentwickler damit um?

Answer 1

Wenn Ihre Skripte nicht funktionierten, wenn Sie sie nicht nach unten verschoben haben, dann haben Sie wahrscheinlich das DOM manipuliert, als das DOM noch nicht fertig war (oder Sie haben document.write verwendet, aber ich bezweifle, dass dies der Fall war). Um dies zu beheben, müssen Sie die Verarbeitung erst starten, wenn das DOM bereit ist. Mit jQuery benötigen Sie so etwas wie:

$(function() { 
    // DOM is ready here and you can safely manipulate it 
}); 

In Bezug auf, wie die Positionierung der Skripte Leistung beeinflusst Ich schlage vor, Sie lesen diese drei Artikel aus der Guru der Client-Seite Leistung:

• http://www.stevesouders.com/blog/2010/12/15/controljs-part-1/
• http://www.stevesouders.com/blog/2010/12/15/controljs-part-2/
• http://www.stevesouders.com/blog/2010/12/15/controljs-part-3/

Asynchrones Laden und verzögerte Ausführung sind sehr heiße Themen jetzt. Sie erlauben es Ihnen, alles unter der sauber zu definieren, aber seien Sie sehr genau darüber, wie sie geladen werden und wann sie ausgeführt werden.

Answer 2

Best Practices for Speeding Up Your Web Site (Put Scripts at the Bottom section)

JavaScript at bottom/top of web page?