In welcher Reihenfolge werden DOMContentLoaded abgearbeitet?

[Rolf B]

Hallo Linuchs,

ja, das Window-Objekt feuert ein load-Event und das Dokument ein DOMContentLoaded Event. Doof, aber wahr.

Ist (die Reihenfolge) Zufall? Je nachdem, welche js-Datei zuerst fertig geladen ist?

Jein. Falls Du deine Scripte asynchron laden würdest, dann ja.

Ein script-Element, dass weder async noch defer noch type="module" hat, hält die DOM-Erzeugung an (ggf. sogar den HTML Parser, meine ich). Der Browser lädt das Script, führt es aus und DANN geht die DOM-Erzeugung weiter.

D.h. 5 Scripte bewirken:

• STOPP DAS DOM
• Lade Script 1
• WAAAAAARTE auf den Server
• Führe Script 1 aus
• WEITER MIT DOM - STOPP DAS DOM
• Lade Script 2
• WAAAAAARTE auf den Server
• Führe Script 2 aus
• ...
• WEITER MIT DOM

Heißt: Die DOMContentLoaded-Handler werden in der Reihenfolge der Script-Einbindungen registriert und auch in dieser Reihenfolge verarbeitet. Wenn Du das bezweifelst, bau in jeden Handler ein console.log("DOMContentLoaded von script ... wird ausgeführt"); ein.

FALLS deine Scripte nichts weiter tun, als DOMContentLoaded-Handler zu registrieren - oder die Dinge, die sie außerdem tun, auch genauso gut im DOMContentLoaded-Handler stehen könnten. dann würde ich Dir empfehlen, auf DOMContentLoaded zu verzichten und den Script-Elementen statt dessen das Attribut defer zu geben. Das defer-Attribut wird hinreichend gut unterstützt. Mit defer angeforderte Scripte werden asynchron, also parallel zum DOM-Aufbau, geladen und nach Fertigstellung des DOM und nach Fertigladen der Stylesheets in der Reihenfolge der Anforderung ausgeführt. Wenn sie fertig sind, dann feuert DOMContentLoaded.

Zu beachten ist dabei, dass DOMContentLoaded normalerweise nicht darauf wartet, dass die Stylesheets alle geladen sind. Aber DOMContentLoaded wartet auf defer-Scripte, und defer-Scripte warten darauf, dass die Stylesheets da sind. D.h. ein einziges defer-Script kann dazu führen, dass DOMContentLoaded auf das Fertigladen der Stylesheets wartet. Ob das ein Problem ist oder nicht, musst Du entscheiden.

Noch besser wäre zweifellos, die Scripte mit type="module" zu laden (das impliziert defer), aber damit werden sie zu ECMAScript-Modulen mit allen Konsequenzen (sie laufen im strict mode und alles, was nicht exportiert wird, ist nur im Modul zugänglich). Ob das für deine Scripte taugt, musst Du für Dich entscheiden.

Rolf