1unitedpower: javascript forward referenz unmöglich?

Beitrag lesen

Ob ich das Script am Ende des body so notiere, dass es sofort startet, oder ob ich es im head (oder auch am Ende des body) in einen Eventhandler verpacke ist jetzt inwiefern performance-technisch ein Unterschied?

Wenn der Browser beim Parsen des HTML auf ein script-Element stößt, beginnt er unmittelbar damit das Skript herunterzuladen, zu parsen und auszuführen. In der Zeit wird der HTML-Parser suspendiert, denn es könnte ja sein, dass das Skript bereits DOM-Manipulationen vornimmt, die den Parser anschließend beeinflussen könnten. Mit dem script-Element am Ende des body verschiebt man die Pause bis kurz vor Ende des Parsing-Prozesses, zu diesem Zeitpunkt sollte der Browser alle nötigen Informationen haben, um die Seite zu rendern. Diese Methode hat allerdings den Nachteil, dass erst sehr spät mit dem Download des Skripts begonnen wird. Ideal wäre es, möglichst früh mit dem Download zu beginnen, aber den HTML-Parser während des Downloads weitermachen zu lassen. Dafür notiert man das script-Tag im Kopfbereich zusammen mit dem async- oder defer-Attribut. Mit async-Attribut wird die Skriptausführung dann unmittelbar begonnen, wenn der Download abgeschlossen ist. Das blockiert dann wiederum den HTML-Parser. Beim defer-Attribut wird mit der Ausführung noch so lange gewartet bis auch der HTML-Parser seinen Job erledigt hat. Das kann man sich grafisch sehr schön veranschaulichen.