Grundlagen der Webtechnologien

Bei der Verarbeitung, die ein Browser bis zur Anzeige des ersten Bildschirms ausführt (dem kritischen Rendering-Pfad), hält ein ohne Attribute in <head> geschriebenes <script src="app.js"> das Parsen des HTML an dieser Stelle an. Wie verhält sich das Element, wenn es das Attribut defer erhält?

  1. AEs wird ausgeführt, sobald der Download fertig ist, wobei das Parsen des HTML angehalten wird; die Ausführungsreihenfolge mehrerer Skripte ist nicht garantiert
  2. BEs wird weder heruntergeladen noch ausgeführt, sondern erst geladen, wenn der Nutzer mit der Seite interagiert
  3. CEs wird parallel zum Parsen des HTML heruntergeladen und nach dem Ende des Parsens in der Reihenfolge ausgeführt, in der es im Dokument steht
Antwort und Erläuterung anzeigen

Antwort: C. Es wird parallel zum Parsen des HTML heruntergeladen und nach dem Ende des Parsens in der Reihenfolge ausgeführt, in der es im Dokument steht

Der Browser parst HTML zum DOM und CSS zum CSSOM, kombiniert beide, um festzulegen, was gezeichnet wird, berechnet Position und Größe der Elemente (Layout) und zeichnet sie dann (Paint). Ein script-Element ohne Attribute könnte das DOM verändern, deshalb hält es das Parsen des HTML an, bis es heruntergeladen und ausgeführt ist. Mit defer läuft der Download parallel zum Parsen, und die Ausführung erfolgt nach dem Parsen in der Reihenfolge, in der die Skripte im Dokument stehen. Mit async wird ein Skript ausgeführt, sobald sein Download fertig ist, daher ist die Reihenfolge nicht garantiert.

Dieses Thema üben Zur Themenseite

Weitere Fragen zu Grundlagen der Webtechnologien

  1. In welcher Reihenfolge erscheinen die Zeichen in der Konsole, wenn das obige JavaScript im Browser ausgeführt wird?
  2. Welche URL hat nach der Same-Origin-Policy des Browsers denselben Ursprung wie https://www.example.com/app/index.html?
  3. JavaScript auf einer Seite unter https://app.example.com will mit fetch eine POST-Anfrage mit einem Body vom Content-Type application/json an https://api.example.net/orders senden. Welche Aussage über das Verhalten von CORS in diesem Fall ist richtig?
  4. Welche Aussage über einen Service Worker ist richtig?
  5. Was ist der Hauptzweck, auf einer Seite mit Responsive Design, die auch Smartphones unterstützt, <meta name="viewport" content="width=device-width, initial-scale=1"> in <head> zu schreiben?