Tipps und Tricks zu den Themen: Software- und Webentwicklung

Sonntag, 14. April 2013

Vergleich: JavaScript in HTML einbinden

Es gibt viele Möglichkeiten JavaScript-Dateien in einer HTML-Seite zu integrieren. Hier findet ihr Vor- und Nachteile der aktuell gebräuchlichsten Methoden.

1. Der Klassiker: Link im Head-Bereich
<head>

    ...

    <script type="text/javascript" src="/scripts/myscript.js"></script>

    <script type="text/javascript">

        /* 
           myscript.js ist vollständig geladen
           Zugriff auf das Script ist erlaubt
           Kein Zugriff auf DOM-Elemente!
        */

    </script>

</head>
Diese Methode wird zwar am häufigsten genutzt, ist aber aus vielerlei Hinsicht die schlechteste Wahl. Einerseits wird der Seitenaufbau beim Aufruf einer Website verzögert. Dies ist natürlich auch abhängig von der Größe und Anzahl der Scripte, der Ausführungszeiten von automatisch gestarteten Funktionen aber auch Browser-bedingte "Freeze"-Effekte die bei der Ausführung unregelmäßig auftreten können. Andererseits kann an dieser Stelle auf HTML-Elemente der Seite nicht zugegriffen werden, da diese noch nicht vom Browser geladen bzw. initialisiert sind.


2. Die Alternative: Link unterhalb im Body-Tag
<body>

    ...

    <script type="text/javascript" src="/scripts/myscript.js"></script>

    <script type="text/javascript">

        /* 
           myscript.js ist vollständig geladen
           Zugriff auf das Script ist erlaubt
           Zugriff auf DOM-Element in <body> ist erlaubt
        */

    </script>

</body>
Viel besser ist, wenn die Scripte am Ende der Seite platzieren werden, denn so wird sicher gestellt, dass der Browser zuerst die wichtigen Webseiteninhalte lädt. Ein Nachteil bleibt hier leider trotzdem: automatisch startende Funktionen werden häufig sehr früh gestartet, während der Browser noch beim "Rendern" (zeichnen der Seite) ist. Dies kann dann zu unschönen Rucklern bei der Darstellung führen.


3. Dynamisch integrieren: JavaScript asynchron nachladen
function loadScript(url){

    var a = document.createElement('script');
    a.setAttribute('type','text/javascript');
    a.setAttribute('src',url);
    document.getElementsByTagName('head')[0].appendChild(a);
}

loadScript('/scripts/myscript.js');

/* 
   myscript.js ist nicht vollständig geladen!
   Zugriff auf das Script ist hier nicht möglich!
*/
Optimalerweise werden JavaScript-Dateien asynchron geladen, das bedeutet der Browser wartet nicht an der Stelle wo das Script heruntergeladen werden soll und blockiert somit den Seitenaufbau, sondern führt diese Aufgabe ganz einfach als Hintergrundprozess aus. Dieses Lösung hat wiederum den Nachteil, dass hier nicht vorhergesehen werden kann, wann das Script fertig geladen und darauf zugegriffen werden darf. Bei der Verwendung eines Scripts ist das unproblematisch, wenn allerdings zwei oder mehr Scripte auf dieselbe Weise geladen werden sollen, dass auf Funktionen des Vorhergehenden zurückgreift, dann tritt dieses Problem auf.


4. Sichere Technik: JavaScript asynchron nachladen mit Callback
function loadScriptAsync(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";
    script.async = true; // script.async = "async"; // -> HTML5

    if(script.readyState){ // IE
        script.onreadystatechange = function(){
            if(script.readyState == "loaded"
            || script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    }
    else script.onload = callback; // Other Browsers

    script.src = url; 
    document.getElementsByTagName("head")[0].appendChild(script);
}

loadScriptAsync('/scripts/myscript.js', function(){

    /* 
       myscript.js ist vollständig geladen
       Zugriff auf das Script ist erlaubt
    */
});

Wenn Scripte asynchron geladen werden sollen, ist zu empfehlen eine "Callback"-Funktion an ein Event zu binden, dass ausgelöst wird, sobald das Script fertig geladen und initialisiert ist. Dadurch kann nach dem Laden, frühestmöglich, direkt auf das Script zugegriffen werden.


5. Mit jQuery: JavaScript asynchron nachladen mit Callback + Cache
jQuery.cachedScript = function(url, options) {

    options = $.extend(options || {}, {
        dataType: "script",
        cache: true,
        url: url
    });

    return jQuery.ajax(options); // jqXHR object
};

$.cachedScript('/scripts/myscript.js').done(function(){

    /* 
       myscript.js ist vollständig geladen
       Zugriff auf das Script ist erlaubt
    */
});
jQuery bietet eine etwas vereinfachte Schreibweise um JavaScript asynchron mit einer Callback-Routine zu laden. Mithilfe des "jqXHR object" lässt sich neben einem Callback auch der Browsercache konfigurieren.



Keine Kommentare:

Kommentar veröffentlichen