Warum empfiehlt Google, Asynchronen Code * nach * Skripts in Kopf zu setzen?

Der Job des asynchronen Analyse-Snippets besteht darin, ein intensiveres Skript zu laden, das den Browser des Benutzers auf alle möglichen Arten von Informationen untersucht, um sie zu identifizieren, damit es dem Analyse-Server Bericht erstatten kann. Da jedoch alle diese Analysedaten für die Benutzerfreundlichkeit der Seite nicht ausschlaggebend sind, möchte Google sie nach Belieben des Browsers ausführen.

In der Theorie könnten sie dem Programmierer raten, das asynchrone Snippet ganz unten auf der Seite als letztes Element des Körpers hinzuzufügen. Damit der Programmierer jedoch UI-Ereignisse erfassen kann, die an Analysen gesendet werden, möchten sie die Variable _gaq frühzeitig für die Verwendung bereitstellen. Zum Beispiel könnten Sie eine Schaltfläche haben: <button onclick="_gaq.push(...)">Track</button> . Wenn Sie _gaq früh genug verfügbar machen, wird das kleine Code-Bit im asynchronen Snippet diese Nachrichten in die Warteschlange stellen und das schwerere ga.js wird sie später an den Server senden.

Nun werden einige Implementierungsdetails : ga.js geladen, indem ein neues hinzugefügt wird <script> element zum Dokumentenkopf mit dem Attribut async . IE und WebKit laden <script> -Tags, die aus Skripten eingefügt wurden, asynchron. Firefox und Opera berücksichtigen das Attribut async und laden das Skript asynchron. In beiden Fällen wird ga.js asynchron im Sinne des Browsers geladen.

Schließlich, wenn ga.js ausgeführt wird, ohne das Seitenrendering aufgrund des asynchronen Ladens zu blockieren, kann es die schwere Arbeit des Sammelns aller Benutzerdaten und irgendwelcher Nachrichten in der _gaq -Warteschlange übernehmen und sie an die Server.

Zusammenfassung: Bei diesem Ansatz wird ein kleines Inline-Skript verwendet, das einige Schlüsselvariablen wie _gaq initialisiert, auf die Ihre Seite zugreifen kann, bevor das vollständige ga.js -Skript bereit ist. Dieses kleine Skript fügt dem Dokument dynamisch einen <script src="ga.js"> -Tag hinzu, so dass die meisten Browser es asynchron herunterladen und ausführen, ohne das Rendern der Seite oder die Auswertung kritischer Skripts zu blockieren.

Wenn der Browser die Seite lädt, geschieht dies von oben nach unten. Browser haben eine begrenzte Anzahl von "Verbindungen", die sie verwenden können, um extern verknüpfte Dokumente zu laden. Wenn Sie ihr Skript über Ihr Skript stellen, werden Ihre eigenen Skripts möglicherweise erst geladen, wenn sie vollständig sind. Der analytische Code ist für die Funktionalität der Seite nicht entscheidend, daher können wir ihn für das letzte Mal speichern.