1. Zuhause
  2. Frage und Antwort
  3. So bestellen Sie <script> Tags vs. <style> Tags in HTML Markup für die besten Ergebnisse

So bestellen Sie <script> Tags vs. <style> Tags in HTML Markup für die besten Ergebnisse

2010-03-30 7 views
10

Ich baue meine Website über http://royronalds.com, und ich versuche herauszufinden, welche Reihenfolge der Elemente in der macht am meisten Sinn. Nur um zu nehmen, was ich zur Zeit habe, habe ich:So bestellen Sie <script> Tags vs. <style> Tags in HTML Markup für die besten Ergebnisse

  • <head>
  • <style> externe Sheet
  • <meta>
  • <title>
  • <link>
  • <script> für jQuery
  • <script> Haupt favicon Javascript für die Site
  • <script> google analytics, asynchrones Skript.
  • </head>

Gibt es Gründe, diese anders zu bestellen, so dass die Ladezeiten und andere Fragen mehr reibungslos geschehen, und wenn ja, was wäre die ideale Ordnung sein?

Quelle

2010-03-30 Kzqai

Antwort

6

Moderne Browser warten mit jeder Art von Rendering, bis der gesamte <head> Abschnitt abgerufen wird (einschließlich der darin verknüpften Dateien). Die Reihenfolge spielt daher keine Rolle für Leistung. Bei Javascript ist die Reihenfolge der Dateien die Reihenfolge der Ausführung. Bei Stylesheets bestimmt die Reihenfolge den Vorrang (die Regel, die zuletzt definiert wurde, hat Vorrang, wenn alle anderen Dinge gleich sind).

Wenn Sie die Client-Leistung optimieren möchten, ist es sehr ratsam, Ihre Javascript-Includes auf the very end of the <body> element zu verschieben, anstatt sie in die <head> zu setzen. Es gibt mehr Überlegungen, Yahoo's list of optimisations ist es wert, Ihre Zeit zu lesen. Google has some good advice als auch.

Quelle

2010-03-30 21:07:34 molf

+1

Die Ausführungsreihenfolge für asynchrone Skripts ist nicht unbedingt die Reihenfolge, in der sie auf der Seite angezeigt werden. Es ist auch nicht unbedingt ratsam, asynchrone Skripte unten zu platzieren. Auf vielen Seiten kann das Laden von Async-Skripts in den oberen Bereich die gesamte Ladezeit der Seite verringern, ohne den Inhalt aufgrund der erhöhten Parallelität zu blockieren. – Brian

6

Eine Sache, die eine große Wirkung haben kann, verschiebt <script> Tags an den unteren Rand der Seite, wenn sie nicht wesentlich für den Inhalt sind.

Zum Beispiel würde ich die Google Analytics <script> Tag als letzte Sache vor dem Tag auf jeder Seite verschieben. Skript-Tags blockieren den Inhalt, so dass der Browser nicht mit der Seitenwiedergabe fortfährt, bis das Skript heruntergeladen und ausgeführt wurde. Ihre javascript- und JQuery-Hauptdateien können wahrscheinlich nicht so einfach verschoben werden, je nachdem, wie Sie sie verwenden, aber die Analyse kann sicher ganz unten sein.

Überprüfen Sie die YSlow best practices für weitere Optimierungstechniken.

Quelle

2010-03-30 21:06:52 zombat

+1

Asynchrone Skript-Tags wie das asynchrone Tracking-Snippet von Google Analytics blocken Inhalte nicht wie normale Skripts. Bitte beachten Sie: http://www.stevesouders.com/blog/2010/03/03/p3pc-google-analytics/ – Brian

+0

Interessant. Das ist eine relativ neue Änderung des GA-Codes. Ich war mir dessen nicht bewusst, danke für die Verbindung. Die meisten Websites verwenden wahrscheinlich immer noch das alte nicht-asynchrone Skript aus den Geräuschen davon. – zombat

+0

Die meisten Websites tun dies, und Ihr Kommentar trifft definitiv auf das nicht-asynchrone GA-Snippet zu. Ich wollte nur darauf hinweisen, dass diese Frage über asynchrone GA gestellt wurde. – Brian

0

Beachten Sie auch die Tatsache, dass Browser die Ausführung von JavaScript anhalten, wenn ein Fehler auftritt.

Aus diesem Grund ist es sehr wichtig, dass Ihre Javascript Arbeit auf allen Browsern, was Sie Ihren Analytics-Code nicht riskieren, Ausführung und Statistiken erfassen ...

lege ich meine in der Regel Google Analytics über meinem eigenen Code, damit es läuft Erstens, und wenn in dem seltenen Fall, dass mein Code bricht oder JS-Fehler verursacht, kann ich immer noch Tracking-Informationen erhalten.

meine Bestellung wäre:

<head> 
<meta> content encoding 
<title> 
<link> favicon 
<style> external/third-party stylesheet 
<style> site stylesheet 
</head> 
<body> 
... 
<script> google analytics 
<script> jQuery 
<script> jQuery plugins 
<script> site javascript 
</body>

Quelle

2010-03-31 02:33:45 farinspace

+1

Browser stoppen die Skriptausführung nur für das Skript-Tag, bei dem der Fehler auftritt. Sie werden weiterhin Code in anderen Skripts ausführen. Wenn Sie ein fehlerhaftes Skript über dem GA-Skript haben, hören Sie nicht auf, das Senden von Beacons zu verfolgen. – Brian

1

durch die Art und Weise, versuchen Sie Ihre E-Mail-Adresse an Anti-Spam ...

dh:

<SCRIPT TYPE="text/javascript"> 
document.write('<A HREF=' + '"mai' + 'lto:' + '[email protected]' + 'example' + '.fr' + '?' + 'sub' + 'ject=music'+'example'+'text">' + 'example' +'@' + 'example' +'.' + 'fr' + '</A><BR>') 
</SCRIPT>

Es funktioniert für mich ...

Quelle

2010-03-31 11:00:30

+0

Ja, ich werde versuchen, etwas (vorzugsweise etwas zugänglicher) dafür zu denken. – Kzqai

Verwandte Themen

 Verwandte Themen