|
1. Ersetzen Sie die Adresse Ihrer .js-Bibliotheksdatei durch die Google CDN-Adresse:
(Google APIs sind in China derzeit nicht sehr stabil, daher wird die Verwendung dieser Methode nicht empfohlen.)
Durch die Verwendung von JS-Bibliotheken wie jquery und mootools werden die zu ladenden JS-Dateien immer zahlreicher und größer. Herkömmliche Websites laden sie normalerweise in das Verzeichnis der Website selbst hoch. Bei einer jquery.js-Datei mit einer Größe von fast 70 KB trägt dies jedoch nicht zur Verbesserung der Reaktionsgeschwindigkeit der Website bei. In diesem Fall sollte die Google API verwendet werden.
Die Bedeutung des Ersetzens von http://www.cnblogs.com/jquery.xxjs durch http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js liegt darin, dass ein Benutzer nach dem Besuch einer Website, die die Google API verwendet, die Datei nicht erneut laden muss, wenn er andere Websites besucht, die die API-Adresse aufrufen. Dadurch wird das Ziel der Beschleunigung erreicht.
Nicht nur die jQuery-Bibliothek, sondern auch andere Bibliotheken wie Mootools Yui können diese Methode verwenden.
Ich empfehle eine Website (http://scriptsrc.net/), die die von Google bereitgestellten JS-API-Pfade sammelt. Klicken Sie einfach auf „Kopieren“, um die neueste Version des Dateipfads zu erhalten. 2. Optimieren Sie Ihr JS und CSS:
Obwohl Cache und GZIP zum Schutz verwendet werden, ist auch eine Optimierung von JS und CSS erforderlich. Die von uns geschriebenen JavaScript-Skripte und CSS-Codes sind eingerückt und umbrochen, was für das menschliche Lesen geeignet ist. Browser benötigen diese bedeutungslosen Leerzeichen und Umbrüche jedoch nicht, um diese Skripte auszuführen. Daher sollten wir diese Leerzeichen und Zeilenumbrüche entfernen und sogar die Variablen in JavaScript und CSS kürzen. Zu solchen Optimierungstools gehören YUI Compressor und Closure Compiler. Beide Tools basieren auf Java. Um sie zu verwenden, sollten Sie JDK installieren und JAVA_HOME festlegen. (Für Webmaster ohne Programmierkenntnisse ist es tatsächlich etwas schwierig)
Adresse empfehlen ( http://sweet.fengyin.name/?hl=zh-CN )
Für dieses Tool ist keine lokale JDK-Installation erforderlich. Sie können JS- und CSS-Dateien zur Komprimierung direkt hochladen. Sie können YUI Compressor oder Closure Compiler verwenden.
Der Code nach der Komprimierung durch YUI Compressor oder Closure Compiler sieht wie folgt aus
Funktion hallo(Name) {
alert('Hallo Blog' + Name);
}
hallo('Garten');
Es wird
Funktion hallo(a){alert("hallo Blog, "+a)}hallo("Garten")
Während Einrückungen und Leerzeilen entfernt werden, werden auch die Variablennamen gekürzt. Diese Optimierungsmethode ist irreversibel. Sichern Sie daher vor der Verwendung dieser beiden Komprimierungen eine Kopie der Quelldatei, um zukünftige Änderungen zu erleichtern. 3. GZIP komprimiert Ihre JS- und CSS-Dateien:: Das Komprimieren von JS und CSS kann über dynamische Serverskripte oder einfacher über einen Apache-Server erfolgen. Sie können den folgenden Code zur .htaccess im Stammverzeichnis der Website hinzufügen.
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE Text/HTML-Text/CSS-Text/Nur-Text/XML-Anwendung/X-JavaScript-Anwendung/JSON
Header anhängen Vary Accept-Encoding
</IfModule>
Dieser Code bedeutet, dass das Komprimierungsmodul des Servers aufgerufen wird, um vor der Ausgabe eine GZIP-Komprimierung der oben genannten Dateien durchzuführen. Nach der GZIP-Komprimierung sollte die Größe aller Dateien um mehr als 30 % reduziert sein. Insbesondere bei Blogs, die viel js verwenden, kann die Geschwindigkeit durch den Schutz von gzip erheblich verbessert werden. 4. Zwischenspeichern Sie Ihre JS- und CSS-Dateien::
Fügen Sie den folgenden Code zur .htaccess-Datei im Stammverzeichnis Ihrer Website hinzu
<ifmodule mod_expires.c>
<filesmatch "\.(jpg|gif|png|css|js)$">
Läuft abAktiv am
Läuft abStandardmäßig „Zugang plus 1 Jahr“
</filesmatch>
Dieser Code bedeutet, dass ein Header-Cache-Header an jpg|gif|png|css|js gesendet und ein Jahr lang zwischengespeichert wird. Wenn der Browser nicht Strg+F5 verwendet, um eine Aktualisierung zu erzwingen, wird er zwischengespeichert, bis die Zeit abgelaufen ist. Das einzige Bedauerliche ist, dass Sie, wenn Sie die JS- oder CSS-Datei ändern, den vorherigen Pfad oder Dateinamen ändern müssen. Sie können dies auf diese Weise mit base.js?ver=(x) tun, der Browser wird es beim nächsten Mal automatisch lesen und zwischenspeichern.
5. Verwenden Sie CSS-Sprites, um Bilder zu kombinieren
Eine Website verwendet oft kleine Symbole und kleine Bilder zur Verschönerung, aber leider beanspruchen diese kleinen Bilder viele HTTP-Anfragen. Daher können Sie Sprites verwenden, um alle Bilder zu einem Bild zusammenzufügen. Sie können sie online über http://csssprites.com/ oder in PS zusammenfügen.
Weitere Informationen zu CSS-Sprites finden Sie unter http://baike.baidu.com/view/2173476.htm. 6. Optimieren Sie die Bilder Ihrer Website:
Obwohl der umfangreiche Einsatz von Bildern und Symbolen schöne Effekte auf die Website bringen kann, ist die gemischte Bearbeitung von Bildern und Text eine sehr schöne Möglichkeit, Blogbeiträge anzuzeigen. Aber die Größe des Bildes ist wirklich nicht so beeindruckend. JPG ist ein verlustbehaftetes Komprimierungsformat, und obwohl PNG verlustfrei ist, hat es den Nachteil, dass es ziemlich groß ist. Um die Größe des Bildes zu reduzieren und die schnellste Downloadgeschwindigkeit zu erreichen, sollte jedes Bild vor dem Hochladen optimiert werden. Yslow, das sich auf das Frontend konzentriert, hat ein Tool namens smushit
http://www.smushit.com/ysmush.it/
Bei diesem Tool handelt es sich um ein verlustfreies Bildkomprimierungstool, mit dem Sie die Größe Ihrer Bilder optimieren und gleichzeitig die Originalqualität beibehalten können. Durch diese Optimierung wird die Größe normalerweise um mehr als 10 % reduziert, was bedeutet, dass ein 30-KB-Bild nach der Optimierung nur noch 27 KB oder weniger groß ist ... Zusammenfassen:
Die oben genannten 6 Optimierungsmethoden betreffen alle das Front-End. Die Bedeutung der Front-End-Optimierung besteht darin, HTTP-Anforderungen zu reduzieren und die Größe der Front-End-Programmkomponenten der Website zu verringern.
Tatsächlich ist es auch notwendig, bei der Back-End-Optimierung mehr Datenbankabfragen zu reduzieren. Die schnellste Geschwindigkeit kann durch das Zwischenspeichern häufig verwendeter Daten durch einen Speichercache wie Memcache erreicht werden.
|
