Javascript nachladen

Viele Seiten setzen inzwischen ziemlich viel Javascript ein. Das kann dazu führen, dass die Seite länger braucht, um angezeigt zu werden. Zum einen, weil eine relativ große Datenmenge heruntergeladen werden muss (leitungsabhängig), zum Anderen, weil das gesamte Script auch noch interpretiert werden muss (hardware- und browserabhängig).

Ich habe begonnen, den Großteil meiner Scripte erst nachzuladen, wenn die Seite fertig gerendert ist. Zum Glück kommt inzwischen oft jQuery und Google-maps zum Einsatz, so dass sich anbietet, den google-Ajax-Loader zu verwenden.

… und die eigenen Scripte?

Beim konsequenten Einsatz von jQuery sollten die eigenen Scripte eigentlich vernachlässigbar kurz sein ;P.
Kommt dennoch mal mehr Code zum Einsatz, könnte man eigentlich auch mehr nachladen. Aktuell sind das bei uns zum Beispiel das Adserverscript, das Statistikscript und unsere eigenen Scripte. Hier wiederum bietet sich an, nur ein winziges Javascript gleich im Seitenkopf einzubetten:

var loadAnyScript = function(url){
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement("script");
    script.src = url;
    script.type = "text/javascript";
    head.appendChild(script);
    script.onload = function(){
        head.removeChild(script);
    }
};

Für mehrere Scripte bietet sich an, das Ganze noch ein Wenig zu pimpen:

var speedingUpJs = {
    scripts: ["/sript1.js", "script2.js", "http://url1.de/script.js"],
    init: function() {
        for each (script in this.scripts)
            this.loadAnyScript(script);

        // die restliche Initialisierung
    },
    loadAnyScript: function(url){
        var head = document.getElementsByTagName("head")[0];
        var script = document.createElement("script");
        script.src = url;
        script.type = "text/javascript";
        head.appendChild(script);
        script.onload = function(){
            head.removeChild(script);
        }
    }
};

Laut AJAX-API lässt sich sogar das google-Script nachladen.

PS: Im Script habe ich for each als Seitenhieb untergebracht. Der IE kanns nämlich nicht.
PPS: Im gesamten Script kommt kein jQuery vor, weil wir das Framwork ja erst nachladen wollen.

Advertisements

alle wollen schneller

Wenige Stunden nachdem ich das Post über die neue Javascript-Engine für den Firefox gelesen habe, die natürlich viel viel viel schneller als alles Bisherige ist, legen die Redmonder nach und beschreiben, warum ihr Browser der schnellste und produktivste sein wird. Aufgeschreckt durch so viel Ehrgeiz habe ich schnell für die Nachwelt einen Snapshot angefertigt. Hier also der Stand vom 27.8.2008, eine Selector-Speed-Messung mit gängigen Frameworks im Firefox3 und IE8beta.
Firefox3:

Firefox3

Firefox3

IE8beta:

IE8-Performance

IE8-Performance

Abgesehen davon, dass die Dojo/Unterstützung für den IE8 noch nicht ganz ausgereift ist, wird ganz schnell deutlich, dass der Firefox die Tests zur Zeit deutlich schneller absolviert, als sein Microsoft-Konkurrent. Da existiert Nachholbedarf.

Bremse Design

Aus dem IE-Post wird aber auch deutlich, dass, gemessen am Gesamtaufwand eine Webseite anzuzeigen, Javascript ein eher unbedeutender Posten zukommt, verglichen mit CSS. Wow. Seit Tagen beschäftige ich mich damit, zu messen, wie unterschiedliches Markup die Rendergeschwindigkeit beeinflusst, bin aber noch zu keinem vorzeigbaren Ergebnis gekommen. Der Selector-Speed-Test erscheint mir ungeeignet, weil zumindest mein geliebtes jQuery beim Zugriff auf DOM-Knoten nicht immer die getElement-Methode, sondern häufig auch RegEx benutzt, was in Zukunft übrigens viel viel viel schneller vor sich gehen wird, wenn John Reisigs neue Selector-Engine Sizzle zum Einsatz kommen wird.
Aber das ist schonwieder ein ganz anderer Post….

via