Einbindung von JavaScripten

[zer0]

Welchen Sinn hat die folgende Einbindung von JavaScript in eine Seite?

(function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();

Das ist jetzt ein Beispiel von Disqus. Etwa das selbe sieht man auch bei Google Analytics!
Warum wird das so gemacht? Man kann doch ein ganz normalen Script-Tag am ende des Bodys machen, sodass dieser erst am Ende geladen wird. Ausserdem warum wird eine Anonyme Funktion erstellts (function() {})(); ?

 

[CPoly]

Die anonyme Funktion ist im Prinzip nicht wirklich notwendig, wie üblich dient sie dazu die Variablen nach außen zu verdecken und umgekehrt von außen nicht behindert zu werden (Es könnte bereits eine Variable namens "dsq" geben).

Wieso macht man das einbinden so? Wichtig dabei "dsq.async = true". Das heißt, das Skript blockiert auf keinen Fall ein anderes. Das Problem ist nämlich, dass selbst wenn du die Skripte am Ende der Seite einbindest, blockieren diese das weitere Parsen des HTML, bis das JavaScript heruntergeladen und ausgeführt wurde.

Ich hatte den Fall erst vor ein paar Tagen. Ich habe noch den synchronen Google+ Button auf der Seite (werde ich die Tage ändern, es gibt dort inzwischen auch einen asynchronen). Und als ich die Seite aufgerufen habe, bekam ich nur eine weiße Seite und links unten stand "waiting for apis.google.com". Scheinbar war der Server einen Moment lang nicht erreichbar und hat dadurch verhindert, dass ich die Seite überhaupt aufrufen und ansehen konnte!

 

[zer0]

Ja, aber man kann das Attribut async doch auch manuell setzen?

 

[CPoly]

Ja, es wird auch gar nicht von allen Browsern unterstützt. http://stackoverflow.com/questions/1834077/which-browsers-support-script-async-async/6766189#6766189

Die Browser die es nicht unterstützen, blockieren bei dieser Art des Einbindens aber auch nicht. Denn nach dem du das Skript tag ins Dokument injiziert hast, springt der Parser nicht plötzlich zu dem Tag und führt es aus, sondern die Seite wird erst fertig geparst. Also ist es eine Art manuelles async.