Beschleunigen Sie das Laden von jQuery in WordPress mit CDN und AJAX_jquery

Sind Sie sicher, dass Sie es in den Abschnitt „Kopf“ einfügen möchten?

Tatsächlich ist es am besten, js-Dateien nicht in den -Bereich zu laden, da dies sonst die Ladegeschwindigkeit des head-Bereichs beeinträchtigt und direkt zu einer Verzögerung beim Laden des Inhalts (Body) von führt die Website. Wenn Sie sicher sind, dass Sie jQuery nicht im Head-Bereich laden müssen, verschieben Sie den Ladecode bitte vor , genauer gesagt vor dem ersten Javascript-Code, der die jQuery-Funktion verwenden wird.

Wenn Sie jquery im Kopfteil laden müssen, stellen Sie natürlich auch sicher, dass alle js-Dateien, einschließlich jquery, nach dem Code platziert werden, der die CSS-Datei aufruft, um einen synchronen Download zu erreichen. Dies ist auch die offizielle Empfehlung von Google. Beispielsweise wird das folgende Laden nicht empfohlen:

<script src=jquery.js></script>

<link href="style.css" .../>

Verwenden Sie stattdessen:

<link href="style.css" .../>

<script src=jquery.js></script>

Sind Sie sicher, dass Sie nicht asynchron laden möchten?

Asynchrones Laden blockiert nicht das Laden von Webseiten, während nicht asynchrones Laden das Laden von Webseiten im Browser kurzzeitig blockiert, bevor das JS selbst geladen wird. Dies kann Ihr Surferlebnis beeinträchtigen.

Wenn Ihr Ladecode

ist

<script type="text/javascript" src="jquery.js"></script>

Dann müssen Sie wissen, dass dies kein asynchrones Laden ist, sondern ein synchrones Laden. Wenn Sie die JQuery-Funktion nicht rechtzeitig nach dem Laden der Seite aufrufen müssen, können Sie JQuery mithilfe des asynchronen Ladens laden, bevor die Webseite geladen wird, was die Ladegeschwindigkeit erheblich beschleunigt. Dieser Code sieht aus wie Google Analytics-Code.

(function(doc){

var j =doc.createElement("script");

j.type = "text/javascript"; j.async = true; j.src = "jquery.js";

var s = doc.getElementsByTagName("script")[0];

s.parentNode.insertBefore(j, s);

})(document);

Aber meiner Beobachtung nach müssen wir die meiste Zeit synchron laden, insbesondere wenn Sie auch das jQuery-Plug-in einführen müssen.

Welche Version von jQuery soll verwendet werden?

Wordpress wird immer mit der neuesten jQuery-Bibliothek geliefert und die Verwendung jeder Version ist immer etwas anders. Je neuer die jQuery-Version ist, desto höher ist die Leistungsverbesserung. Einige JQuery-Plug-Ins sind jedoch möglicherweise nicht mit neuen Plug-Ins kompatibel und haben selbst keine Updates veröffentlicht. Möglicherweise wurden einige der von Ihnen verwendeten Methodenfunktionen in der neuen Version geändert und das, was früher funktionierte, funktioniert nicht mehr. In diesem Fall sollte der Grundsatz beachtet werden, möglichst die aktuellste jQuery-Bibliothek zu verwenden und gleichzeitig die Kompatibilität sicherzustellen.

Zum Beispiel haben Sie früher die 1.6.2-Version von jquery verwendet, und jetzt stellen Sie fest, dass einige Funktionen von 2. Das ist gut. Zu diesem Zeitpunkt können Sie 1.6.2 aufgeben und die neue Version von 2.X durch die 1.7.2-Version von jQuery ersetzen.

Welche jQuery-CDN-Bibliothek soll verwendet werden?

jQuery ist einfach zu groß! Wenn Ihre Website nicht schnell ist, wirkt sich JQuery definitiv auf die Ladegeschwindigkeit Ihrer Seite aus. Glücklicherweise haben Baidu, Sina, Microsoft, Google und andere Unternehmen öffentliche JS-Bibliotheken eingeführt, die Website-Besitzer bequem aufrufen können, um die Downloadzeit zu verkürzen, und sie verfügen über ultraschnelle CDN-Server, die Downloadzeit sparen.

Die von Google bereitgestellte JQuery-Bibliothek wird derzeit häufiger verwendet:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Natürlich ist die inländische Zugriffsgeschwindigkeit von Baidu nicht zu unterschätzen:

<script type="text/javascript" src="//libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>

Sinas CDN ist auch sehr schnell:

<script type="text/javascript" src="//lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

Wenn Sie dem Trend nicht folgen möchten, können Sie auch das JQuery-CDN von Microsoft wählen:

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>

Sie können die oben angezeigte Versionsnummer direkt ändern, um eine andere Version auszuwählen. Welches ist das schnellste? Wie wähle ich?

Wenn Ihre Website viele Besucher aus dem Ausland hat, empfiehlt es sich, Google zu wählen. Wenn die Hauptbesucher aus China kommen, ist die Wahl von Baidu kein Problem. Allerdings ist die Zugriffsgeschwindigkeit von Baidu im Ausland nicht so hoch wie die von Google.

Und da sich die meisten Websites aufgrund der Caching-Prinzipien für das CDN von Google entscheiden, ist das CDN von Google beim Besuch Ihrer Website möglicherweise schneller.

Wenn Sie nicht sicher sind, ob die Download-Geschwindigkeit Ihrer Website hoch ist, empfehle ich Ihnen, am besten das oben genannte öffentliche CDN zu verwenden, um Ladezeit und Datenverkehr zu sparen.

Müssen Sie wirklich jQuery verwenden?

Wenn Ihre Website nur eine kleine Funktion mit JQuery benötigt, warum müssen Sie dann eine so große Datei herunterladen? Warum nicht jQuery-frei?

Zum Beispiel können Sie zepto.js in Betracht ziehen, dessen Designziel darin besteht, „die jQuery-API-Kompatibilität bei kleinster Größe zu maximieren“. Nach der GZIP-Komprimierung sind es nur 10 KB.

Darüber hinaus verfügt jQuery über ein Moduldesign, sodass Sie nur die Module auswählen können, die Sie benötigen. Sie können sich auf den JQuery-Builder beziehen.

Der richtige Weg, jQuery zu laden

Nachdem das alles gesagt ist, wie lädt man jquery richtig?

Wählen Sie zunächst aus, welches CDN oder welche eigene Website die js-Datei hosten soll, und bestimmen Sie, ob sich der Aufrufort im Kopf oder im Körper befindet. Die normale Lademethode ist

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Allerdings sind die Dienste von Google in China zeitweise unterbrochen, sodass ich mich um inländische Besucher kümmern und Folgendes schreiben kann:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Wenn jQuery nicht erfolgreich geladen werden kann, wird die JQuery-Bibliothek von Baidu auf diese Weise automatisch geladen, was sie narrensicher macht.