Wo sollte ich Javascript auf einer Seite einfügen?

Question

Ich baue eine Rails-App, und es scheint, dass gängige Praxis darin besteht, javascript_include_tags oben auf einer Seite aufgeführt zu haben.

Würden die Browser Javascript laden, bevor sie das Dokument laden, und somit das Laden der sichtbaren Elemente länger dauert?

Vielen Dank.

Answer 1

Sieht aus wie einige Antworten richtig waren, aber keiner bringt es auf den Punkt:

• JavaScript Laden von Laden anderen Elementen zu verhindern? Einfach, leg es gleich vor das schließende </body> tag. Das bedeutet normalerweise ein paar Zeichen vor dem Ende Ihrer HTML-Seite.
• Setzen Sie alle Ihre Javascript in externe .js-Dateien. Warum? Damit können die Browser diese Dateien auch dann speichern, wenn sich die HTML-Seite ändert.
• Aggregieren und minimieren Sie alle Ihre Javascript-Dateien in einem. Warum? Je weniger HTTP-Anforderungen Ihre Clients stellen, desto schneller wird die Seite geladen.

Auch Sie müssen über $(document).ready() oder window.onload nicht kümmern, da alle Ihre HTML-Elemente vor den Javascript-Dateien geladen werden (das heißt, wenn Sie die JS-Dateien setzen direkt vor dem Schließen </body>-Tag).

Answer 2

Soweit ich im Web gelesen habe, lädt Best Practice Javascript-Dateien am unteren Rand des Body-Tags. Dadurch kann fast alles geladen werden, bevor JavaScript ausgeführt wird, was normalerweise Probleme beim Zugriff auf Elemente verhindert, die möglicherweise nicht vorhanden sind, wenn Sie das Skript oben geladen haben.

Answer 3

Ein Yahoo-Post über die Leistung der Webseite schlägt vor, sie am Ende der Seite (Source), weil sie parallele Downloads anderer Abhängigkeiten blockieren können, wenn sie an der Spitze sind.

Answer 4

Es ist eine gute Idee, externe JS-Datei zu verwenden und ihren Inhalt zu minimieren.

• http://www.quirksmode.org/js/placejs.html

Unten auf der Seite ist auch eine Option, wie sagte John Fisher.

Wenn Sie z. B. jQuery verwenden, verwenden Sie in jedem Fall $() oder $(document).ready(function(), die sicherstellt, dass das Seiten-DOM geladen ist, bevor Sie versuchen, Ihre JS-Funktionen zu verwenden.

Answer 5

Anstatt das Verhalten in seiner Markup Einbetten versuchen, das Skript entmischen , indem sie einem Skriptblock im Bereich der Seite, außerhalb des Geltungsbereichs des Dokumentkörper bewegt, wie folgt:

<script type="text/javascript"> 
window.onload = function() { 
document.getElementById('testButton').onclick = function() { 
document.getElementById('xyz').style.color = 'red'; 
}; 
}; 
</script> 

Aus Leistungsgründen können Skriptblöcke auch im unteren Bereich des Dokumententexts platziert werden, obwohl moderne Browser die Leistung Differenz eher strittig machen. Das wichtige Konzept besteht darin, die Einbettung von verhaltensorientierten Elementen in die Strukturelemente zu vermeiden.