speeding up js

Oft geht es um Geschwindigkeit. Auf die allermeisten Seiten im Netz muss man nicht mehr warten bis sie fertig aufgebaut sind – sie sind einfach da.
Also ist die erste Anforderung Geschwindigkeit. Bei meinem letzten Projekt www.pnn.de setzen wir darum auf Kollektoren, die alle nötigen Stylesheets und die wichtigsten Javascripte zu jeweils einer Datei zusamenfassen, um Requests zu sparen. Sowohl die googleMaps-, als auch die jQuery-API lade ich nach, während die Seite schon angezeigt wird – Javascripte, die ich nicht auf jeder Seite brauche, hole ich über einen Plugin-Mechanismus danach. Das funktioniert übrigens auch mit Stylesheets.
Dieses Vorgehen kollidiert mit der zweiten Anforderung, Benutzbarkeit für alle – auch ohne Javascript. Bedienelemente, die ausschließlich Javascriptaktionen auslösen, dürfen nur dann sichtbar sein, wenn Javascript auch tatsächlich aktiviert ist. Das fiel mir bei meinem letzten Projekt www.zweitehand.de auf die Füße. Bis alle meine Scripte initialisiert sind, ist die Seite längst geladen, der User nimmt deutlich wahr, dass sich Elemente ändern, Knöpfe auftauchen und Links verschwinden. Würde er in dieser kurzen Pre-Init-Phase auf der Seite herumklicken, hätte das zum Teil unerwünschte Effekte. Hier brachte schon die Erweiterung meines Hauptscriptes um die jQuery-Api den gewünschten Erfolg. Das Script wird sofort nach dem Seitenaufbau initialisiert – unmerklich für den User.

Wenn allerdings das Javascript nicht sofort bedienbaren Widgets, sondern überwiegend optischen Effekten dient, kann man beim langsamen Nachladen der APIs bleiben und erweitert sein Startscript einfach um die Anweisung document.getElementsByTagName("body")[0].className = "javascript";.
Jetzt kann man einfach im Stylesheet entscheiden, welche Elemente in der Javascript-Version sichtbar sein sollen – und welche nicht.

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