Basis van webtechnologie

Bij de verwerking die een browser uitvoert voordat het eerste scherm wordt getoond (het kritieke renderingpad, critical rendering path), laat een <script src="app.js"> zonder attributen in <head> de HTML-parser op dat punt stoppen. Welke beschrijving van het gedrag als aan dit element het attribuut defer wordt toegevoegd, is juist?

  1. AHet script wordt uitgevoerd zodra het downloaden klaar is, waarbij de HTML-parser stopt, en de volgorde van uitvoering van meerdere scripts is niet gegarandeerd
  2. BHet script wordt niet gedownload en niet uitgevoerd, en pas geladen wanneer de gebruiker voor het eerst iets op de pagina doet
  3. CHet script wordt gedownload terwijl de HTML-parser doorwerkt, en uitgevoerd nadat het document is geparseerd, in de volgorde waarin de scripts in het document staan
Antwoord en toelichting tonen

Antwoord: C. Het script wordt gedownload terwijl de HTML-parser doorwerkt, en uitgevoerd nadat het document is geparseerd, in de volgorde waarin de scripts in het document staan

De browser parseert HTML tot het DOM en CSS tot het CSSOM, combineert die twee om te bepalen wat er moet worden getekend, berekent de posities en afmetingen van de elementen (lay-out) en tekent ze daarna (paint). Een script-element zonder attributen kan het DOM herschrijven, dus de HTML-parser stopt tot het script is gedownload en uitgevoerd. Met defer gaat het downloaden door terwijl de parser verder werkt, en vindt de uitvoering plaats nadat het hele document is geparseerd, in de volgorde waarin de scripts in het document staan. Met async wordt een script uitgevoerd zodra het downloaden klaar is, zodat de volgorde niet gegarandeerd is.

Dit onderwerp oefenen Naar de onderwerppagina

Meer vragen over Basis van webtechnologie

  1. In welke volgorde worden de tekens op de console getoond als de bovenstaande JavaScript in een browser wordt uitgevoerd?
  2. Welke URL wordt volgens de same-origin policy van de browser beschouwd als URL met dezelfde origin als https://www.example.com/app/index.html?
  3. JavaScript op een pagina van https://app.example.com gebruikt fetch om een POST-verzoek met een body van Content-Type: application/json naar https://api.example.net/orders te sturen. Welke beschrijving van het gedrag van CORS in dit geval is juist?
  4. Welke beschrijving van een Service Worker is juist?
  5. Wat is bij een pagina met responsive design die ook smartphones ondersteunt, het belangrijkste doel van <meta name="viewport" content="width=device-width, initial-scale=1"> in <head>?