js-Leistungsoptimierung So laden Sie Ihre JavaScript-Seiten schneller

Stellen Sie sicher, dass der Code so prägnant wie möglich ist

Verlassen Sie sich nicht bei allem auf JavaScript. Schreiben Sie keine sich wiederholenden Skripte. Stellen Sie sich JavaScript als ein Süßigkeiten-Tool vor, das nur der Verschönerung dient. Fügen Sie Ihrer Website nicht viel JavaScript-Code hinzu. Verwenden Sie es nur bei Bedarf. Verwenden Sie es nur, wenn es das Benutzererlebnis wirklich verbessern kann.

DOM-Zugriff minimieren

Die Verwendung von JavaScript für den Zugriff auf DOM-Elemente ist einfach und der Code ist leichter zu lesen, aber er ist langsam. Hier sind einige wichtige Punkte: Beschränken Sie die Verwendung von JavaScript zum Ändern des Webseitenlayouts und zwischenspeichern Sie Verweise auf Elemente, auf die zugegriffen wird. Wenn Ihre Website auf umfangreiche DOM-Änderungen angewiesen ist, sollten Sie manchmal eine Einschränkung Ihres Markups in Betracht ziehen. Dies ist ein guter Grund, auf HTML5 umzusteigen und das alte XHTML und HTML4 aufzugeben. Sie können die Anzahl der DOM-Elemente überprüfen, indem Sie document.getElementsByTagName('*').length in die Konsole des Firebug-Plugins eingeben.

Komprimierter Code

Um komprimierte JavaScript-Seiten bereitzustellen, verwenden Sie zunächst ein JavaScript-Komprimierungstool, um Ihren Code zu komprimieren. Dieses Komprimierungstool kann Variablen- und Parameternamen komprimieren wird dann mit gzip-Komprimierung bereitgestellt.

Ja, ich habe meine main.js nicht komprimiert, aber Sie sollten überprüfen, ob es jQuery-Plugins gibt, die unkomprimiert sind, und vergessen Sie nicht, sie zu komprimieren. Nachfolgend habe ich einige Optionen zur Komprimierung aufgelistet.

　◆ YUI-Komprimierungstool (wird vom jQuery-Entwicklungsteam verwendet), Anfängerleitfaden

(http://www.slideshare.net/nzakas/extreme-JavaScript-compression-with-yui - Kompressor), der zweite Leitfaden (http://vilimpoc.org/research/js-speedup/) und die offizielle Website (http://developer.yahoo.com/yui/compressor/).

　◆ Dean Edwards Packer(http://dean.edwards.name/packer/)

　◆ JSMin(http://crockford.com/JavaScript/jsmin)

GZip-Komprimierung: Die Idee dahinter ist, die Zeit für die Datenübertragung zwischen Browser und Server zu verkürzen. Nach Verkürzung der Zeit erhalten Sie eine Datei mit dem Titel Accept-Encoding: gzip,deflate. Allerdings hat diese Komprimierungsmethode einige Nachteile. Es beansprucht Prozessorressourcen sowohl auf der Server- als auch auf der Clientseite (zur Komprimierung und Dekomprimierung) sowie Speicherplatz.

Vermeiden Sie eval(): Auch wenn eval() manchmal Zeiteinsparungen mit sich bringen kann, ist die Verwendung definitiv der falsche Ansatz. eval() führt dazu, dass Ihr Code schmutzig aussieht und der Komprimierung durch die meisten Komprimierungstools entgeht.

Tools, um das Laden von JavaScript zu beschleunigen: Lab.js

Es gibt viele tolle Tools, um das Laden von JavaScript zu beschleunigen. Ein erwähnenswertes Tool ist Lab.js.

Mit LAB.js (Loading and Blocking JavaScript) können Sie JavaScript-Dateien parallel laden und so den gesamten Ladevorgang beschleunigen. Darüber hinaus können Sie eine bestimmte Reihenfolge für die zu ladenden Skripte festlegen, um die Integrität der Abhängigkeiten sicherzustellen. Darüber hinaus behauptet der Entwickler auf seiner Website eine zweifache Geschwindigkeitsverbesserung.

Verwenden Sie ein geeignetes CDN

Viele Webseiten verwenden mittlerweile ein Content Delivery Network (CDN). Es verbessert Ihren Caching-Mechanismus, da jeder ihn nutzen kann. Außerdem sparen Sie dadurch etwas Bandbreite. Sie können diese Server einfach anpingen oder mit Firebug debuggen, um herauszufinden, wo Sie die Daten beschleunigen können. Berücksichtigen Sie bei der Auswahl eines CDN den Standort der Besucher Ihrer Website. Denken Sie daran, nach Möglichkeit öffentliche Repositorys zu verwenden.

Mehrere CDN-Lösungen für jQuery:

　◆ http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js——Google Ajax, siehe http://code.google.com/apis/libraries/devguide.html#Libraries für Informationen zu weiteren Bibliotheken.

　◆ http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js – Microsofts CDN

　•http://code.jquery com /jquery-1.4.2.min.js – Edgecast (mt).

JavaScript am Ende der Seite laden

Dies ist eine sehr gute Vorgehensweise, wenn Sie sich auf Benutzer konzentrieren, die Ihre Seite aufgrund einer langsamen Internetverbindung nicht verlassen haben. Benutzerfreundlichkeit und Benutzer stehen an erster Stelle, JavaScript steht an letzter Stelle. Dies kann schmerzhaft sein, Sie sollten jedoch darauf vorbereitet sein, dass einige Benutzer JavaScript deaktivieren. Sie können etwas JavaScript in den zu ladenden Header einfügen, aber nur, wenn es asynchron geladen wird.

Tracking-Code asynchron laden

Das ist sehr wichtig. Die meisten von uns verwenden Google Analytics, um Statistiken zu erhalten. Das ist gut. Schauen Sie sich nun an, wo Sie Ihren Tracking-Code eingeben. Steht es im Header? Oder wird document.write verwendet? Wenn Sie Ihren Code dann nicht asynchron verfolgen, sind Sie selbst schuld.

So sieht der asynchrone Tracking-Code von Google Analytics aus. Wir müssen zugeben, dass es DOM anstelle von document.write verwendet, was möglicherweise besser zu Ihnen passt. Einige dieser Ereignisse können erkannt werden, bevor die Webseite geladen wird, was sehr wichtig ist. Denken Sie nun an diese Situation: Ihre Seite wurde noch nicht einmal geladen und alle Benutzer haben die Seite geschlossen. Haben Sie eine Lösung für fehlende Seitenaufrufe gefunden

var _gaq = _gaq || []; 
_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']); 
_gaq.push(['_trackPageview']); 
(function() { 
var ga = document.createElement('script'); ga.type = 'text/JavaScript'; ga.async = true; 
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
})();

Sie verwenden Google Analytics nicht? Das ist kein Problem, die meisten heutigen Analyseanbieter ermöglichen Ihnen die Verwendung von asynchronem Tracking.

　Ajax-Optimierung

Ajax-Anfragen haben einen erheblichen Einfluss auf die Leistung Ihrer Website. Im Folgenden stelle ich einige wichtige Punkte zur Ajax-Optimierung vor.

Cachen Sie Ihren Ajax

Schauen Sie sich zuerst Ihren Code an. Ist Ihr Ajax zwischenspeicherbar? Ja, es basiert auf Daten, aber die meisten Ihrer Ajax-Anfragen sollten zwischenspeicherbar sein. In jQuery werden Ihre Anfragen standardmäßig zwischengespeichert, mit Ausnahme der Datentypen Skript und JSONP.

Verwenden Sie GET für Ajax-Anfragen

Anfragen vom Typ POST müssen zwei TCP-Pakete senden (zuerst den Header senden, dann die Daten senden). Bei Anfragen vom Typ GET muss nur ein Paket gesendet werden (dies kann von der Anzahl der Cookies abhängen, die Sie haben). Wenn Ihre URL also weniger als 2 KB lang ist und Sie einige Daten anfordern möchten, können Sie genauso gut GET verwenden.

Verwendung von ySlow

Wenn es um die Leistung geht, ist ySlow sowohl einfach als auch äußerst effektiv. Es bewertet Ihre Website und zeigt, welche Bereiche korrigiert werden müssen und auf welche Bereiche der Fokus gelegt werden sollte.

Ein weiterer Trick: Packen Sie Ihr JavaScript in eine PNG-Datei

Stellen Sie sich vor: Fügen Sie Ihr JS und CSS am Ende des Bildes hinzu und verwenden Sie dann CSS, um es über eine HTTP-Anfrage zuzuschneiden alle Informationen, die Sie in der Bewerbung benötigen.

Ich habe diese Methode kürzlich entdeckt. Grundsätzlich werden Ihre JavaScript-/CSS-Daten in eine PNG-Datei gepackt. Danach können Sie es entpacken, indem Sie einfach getImageData() der Canvas-API verwenden. Außerdem ist es sehr effizient. Sie können etwa 35 % mehr komprimieren, ohne die Daten zu verkleinern. Und es ist eine verlustfreie Komprimierung! Ich muss darauf hinweisen, dass Sie bei größeren Skripten das Gefühl haben werden, dass es eine „etwas“ Ladezeit gibt, während das Bild auf die Leinwand zeigt und die Pixel gelesen werden.

Für weitere JS-Leistungsoptimierungen beachten Sie bitte die chinesische PHP-Website mit verwandten Artikeln zum schnelleren Laden Ihrer JavaScript-Seiten!