Ich habe kürzlich die Best Practices für das Yahoo-Manifest zur Beschleunigung Ihrer Website gelesen . Sie empfehlen, die JavaScript-Aufnahme am Ende des HTML-Codes zu platzieren, wenn wir können.
Aber wo genau und wann?
Sollen wir es vor </html>oder nach dem Schließen setzen ? Und vor allem, wann sollten wir es noch in den <head>Abschnitt aufnehmen?
Antworten:
Es gibt zwei Möglichkeiten für wirklich unauffällige Skripte:
</body></html>)Die zweite kann schneller sein, da die ursprüngliche Yahoo-Untersuchung gezeigt hat, dass einige Browser versuchen, Skriptdateien zu laden, wenn sie auf das Skript-Tag klicken, und daher den Rest der Seite erst laden, wenn sie fertig sind. Wenn Ihr Skript jedoch einen "Bereit" -Teil enthält, der ausgeführt werden muss, sobald das DOM bereit ist, müssen Sie ihn möglicherweise im Kopf haben. Ein weiteres Problem ist das Layout. Wenn Ihr Skript das Seitenlayout ändern soll, soll es so früh wie möglich geladen werden, damit sich Ihre Seite nicht lange vor Ihren Benutzern neu zeichnet.
Wenn sich die externe Skriptseite in einer anderen Domäne befindet (z. B. externe Widgets), kann es sinnvoll sein, sie unten zu platzieren, um zu vermeiden, dass das Laden der Seite verzögert wird.
Und für Leistungsprobleme sollten Sie Ihre eigenen Benchmarks erstellen. Was zu einem Zeitpunkt nach Abschluss einer Studie möglicherweise zutrifft, kann sich mit Ihrem lokalen Setup oder Änderungen in den Browsern ändern.
quelle
Es ist noch nie so geschnitten und trocken - Yahoo empfiehlt, die Skripte direkt vor dem schließenden
</body>Tag zu platzieren, wodurch die Illusion entsteht, dass die Seite in einem leeren Cache schneller geladen wird (da die Skripte den Download des restlichen Dokuments nicht blockieren). Wenn Sie jedoch Code haben, den Sie beim Laden der Seite ausführen möchten, wird er erst ausgeführt, nachdem die gesamte Seite geladen wurde. Wenn Sie die Skripte in das<head>Tag einfügen, werden sie zuvor ausgeführt. In einem vorbereiteten Cache scheint die Seite also tatsächlich schneller zu laden.Das Privileg, Skripte am Ende der Seite einzufügen, ist nicht immer verfügbar. Wenn Sie Inline-Skripte in Ihre Ansichten aufnehmen müssen, die von einer Bibliothek oder einem anderen zuvor geladenen JavaScript-Code abhängen, müssen Sie diese Abhängigkeiten in das
<head>Tag laden .Alles in allem sind die Empfehlungen von Yahoo interessant, aber nicht immer anwendbar und sollten von Fall zu Fall geprüft werden.
quelle
<script>Tags bedeuten kein aufdringliches Javascript.<script>Tags sind vom Markup getrennt und können mit Code verwendet werden, der die Benutzeroberfläche verbessert, jedoch nicht erforderlich ist. Inline-<script>Tags sind also nicht von Natur aus aufdringlich .<script>Tags verwenden, um diese Werte in Javascript-Variablen zu codieren, um sie möglicherweise mit zu verwenden Inline-Bearbeitung oder ähnliches Verhalten.Wie andere gesagt haben, platzieren Sie es vor den HTML- Tags des schließenden Körpers .
Neulich hatten wir zahlreiche Anrufe von Kunden, die sich beschwerten, dass ihre Websites extrem langsam waren. Wir haben sie vor Ort besucht und festgestellt, dass das Laden einer einzelnen Seite 20 bis 30 Sekunden dauerte. Da wir dachten, dass die Server schlecht abschneiden, haben wir uns angemeldet - aber sowohl Web- als auch SQL-Server waren zu ~ 0% aktiv.
Nach einigen Minuten stellten wir fest, dass eine externe Site nicht verfügbar war, auf die wir für Javascript-Tracking-Tags verweisen. Dies bedeutete, dass Browser das Skript- Tag im Kopfbereich der Site trafen und darauf warteten, die Skriptdatei herunterzuladen.
Zumindest für Skripte von Drittanbietern / externen Skripten würde ich empfehlen, sie als letztes Element auf der Seite zu platzieren. Wenn sie dann nicht verfügbar wären, würde der Browser die Seite zumindest bis zu diesem Zeitpunkt laden - und der Benutzer würde es nicht bemerken.
quelle
Zusammenfassend basierend auf den obigen Vorschlägen:
</body>Tag.</body>Sie eine vorherige Platzierung in Betracht ziehen, es sei denn, Sie haben einen Randgrund, Skripte in head zu platzieren.quelle
Wenn Sie an der Position Ihrer Skripte basteln möchten, ist YSlow ein großartiges Werkzeug, um Ihnen einen Vorgeschmack zu geben, wenn es die Leistung verbessern oder beeinträchtigen soll. Das Einfügen von Javascript in bestimmte Dokumentpositionen kann die Ladezeiten von Seiten erheblich verkürzen.
http://developer.yahoo.com/yslow/
quelle
Nein, es sollte nicht nach dem sein,
</html>da das ungültig wäre. Der beste Ort, um Skripte zu platzieren, ist direkt vor dem</body>Dies liegt im Wesentlichen daran, dass die meisten Browser das Rendern der Seite beenden, während sie das von Ihnen bereitgestellte Skript bewerten. Es ist also in Ordnung, nicht blockierenden Code an einer beliebigen Stelle auf der Seite zu platzieren (ich denke hauptsächlich an Dinge, die Funktionen an das
onLoadEreignis anhängen , da die Ereignisbindung so schnell ist, dass sie effektiv kostenlos ist). Ein großer Killer ist hier am Anfang der Seite das Einfügen eines Ad-Server-Skripts, mit dem verhindert werden kann, dass Seiten geladen werden, bevor die Anzeigen vollständig heruntergeladen wurdenquelle
Wenn Sie es unten platzieren, wird es zuletzt geladen, wodurch die Geschwindigkeit erhöht wird, mit der der Benutzer die Seite sehen kann. Es muss vor dem Finale sein,
</html>sonst wird es nicht Teil des DOM.Wenn der Code jedoch sofort benötigt wird, setzen Sie ihn in den Kopf.
Es ist am besten, Dinge wie Blog-Widgets unten zu platzieren, damit die Benutzerfreundlichkeit der Seite nicht beeinträchtigt wird, wenn sie nicht geladen werden.
quelle