Speedups für Teckies

Im vorangegangen Speedup-Artikel bin ich ja relativ theoretisch auf kleine Performance-Gewinne eingegangen, wobei das Setzen auf mehrere Domains ein Stück im Vordergrund stand. Hier will ich nun zwei ganz leichte Techniken für Bastler vorstellen:

Komplexe Webangebote bestehen meistens aus mehreren Javascript- und mehreren css-Files. Das erleichert das Entwickeln und auch das Auffinden bestimmter Funktionen. Ich erstelle gerne für jede Javascript-Klasse eine eigene Datei und splitte Styles auch sehr gerne in kleinere Files. Angenommen, die Styles liegen nun in einem Ordner /css, und Javascripte in /scripts, dann empfiehlt sich folgendes Vorgehen:

Man nummeriert die css-Files im Dateinamen (1-grid.css, 2-article.css usw…). Jetzt liest man einfach den Inhalt aller Dateien im Ordner /css in aufsteigender Reihenfolge aus und gibt das Ergebnis aus. Angenommen, das erledigt mein Script css.php, dann binde ich jetzt im Header meiner html-Seiten statt mehrerer css-Files nur ein einziges, nämlich css.php ein.

Dasselbe Vorgehen empfiehlt sich für Javascripts, wobei dort die Reihenfolge der Scriptdateien egal ist.

Der Bastlerteil

Der Hedonist kann nun noch css.php auf global.css rewriten.

Da es hier gerade um Geschwindigkeit geht, bietet sich an, ein flottes Caching einzubauen, um nicht bei jedem Seitenaufruf eines Users zwei Verzeichnisse auslesen zu müssen. Wer sich mit Regular Expressions auskennt, entfernt beim Auslesen auch gleich Whitespaces und Kommentare.Hier zeigt sich dann, wie wichtig Regel 1 unserer noch zu schreibenden Javascript-Coding-Guideline sein wird: Vergiss niemals ein Semikolon am Ende einer Zeile!

schnelleres Javascript

Sehr gelegen kommt mir in meiner Geschwindigkeitsbetrachtung die Entdeckung won window.name und der damit verbundenen Möglichkeit, Javascriptobjekte oder gleich ganze Javascripte darin abzulegen.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s