jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-tools

Gratis HTML Script Laadstrategie Bouwer

Genereer script tags met de juiste laadstrategie — normal, defer, async of type module.

Tool laden...

Wat is HTML Script Laadstrategie Bouwer?

Hoe een script laadt, beïnvloedt paginaprestaties en uitvoeringsvolgorde. Een normaal script blokkeert HTML-parsing. defer downloadt parallel en voert uit na HTML-parsing. async downloadt parallel en voert direct uit zodra gereed. type="module" scripts worden standaard uitgesteld.

Snel antwoord

Kies een laadstrategie op basis van wanneer het script moet uitvoeren. Gebruik defer voor scripts die de volledige DOM nodig hebben, async voor onafhankelijke scripts en type="module" voor ES-modules.

Last updated: 2026-05-25

Beperkingen

  • defer behoudt volgorde, async niet.
  • async scripts kunnen rendering blokkeren als ze groot zijn.
  • type="module" scripts worden standaard uitgesteld.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Selecteer het scripttype dat past bij uw use case.
  2. Voer de script-URL in.
  3. De tool adviseert de beste laadstrategie.
  4. Kopieer de script-tag met de juiste attributen.

Waarvoor je het kunt gebruiken

  • Voeg een deferred app-bundle toe die na paginaparSing draait.
  • Voeg een async analytics script toe dat onafhankelijk laadt.
  • Stel een module script in voor een Vite-entry.

Gebruik

Praktische voorbeelden

Voorbeeld

Analytics met async

Een analytics script gebruikt async om te laden zonder de pagina te blokkeren.

Voorbeeld

App-bundle met defer

Een app-bundle gebruikt defer om HTML-parsing niet te blokkeren.

Veelgemaakte fouten

  • async gebruiken voor scripts die afhankelijk zijn van DOM-elementen.
  • defer gebruiken voor scripts die direct moeten draaien.
  • type="module" gebruiken voor niet-ES-modules.

Verificatie

  1. Controleer Initiator en Waterfall kolommen in DevTools Netwerkpaneel.
  2. Test rendering en interactiviteit met het Prestatiepaneel.

Vergelijking

async vs defer vs type="module"

Aspectasyncdefertype="module"
Execution timingExecutes as soon as the script finishes downloading, before DOMContentLoadedExecutes after HTML parsing is complete, just before DOMContentLoadedExecutes after HTML parsing is complete, same as defer behavior
Script order guaranteeNo. Scripts execute in the order they finish downloading.Yes. Scripts execute in the order they appear in the HTML.Yes. Scripts execute in the order they appear, same as defer.
Blocks HTML parsingDoes not block HTML parsing. Downloads in parallel.Does not block HTML parsing. Downloads in parallel.Does not block HTML parsing. Downloads in parallel.
Use casesIndependent scripts such as analytics, A/B testing, or social widgetsScripts that need the full DOM such as app bundles that query or modify the pageModern ES module code where import/export syntax is used
Default behavior without attributeWithout any attribute, the script blocks HTML parsing until it downloads and executesN/Atype="module" scripts are deferred by default and do not need an explicit defer attribute

Async downloads in parallel and runs on completion. Defer downloads in parallel but waits for the HTML to finish parsing. Module scripts are deferred by default and support ES module dependency graphs.

FAQ

Vragen over HTML Script Laadstrategie Bouwer

Verschil defer en async?

defer wacht op HTML-parsing en behoudt volgorde. async voert direct uit bij gereedheid, zonder volgorde.

Heeft type="module" defer nodig?

Nee. Module scripts worden standaard uitgesteld.

Waar script-tag plaatsen?

In de head met defer of type="module". Beide downloaden parallel en voeren uit na DOM-gereedheid.

Werkt defer op inline scripts?

Nee. defer werkt alleen op externe scripts met src-attribuut.

Gerelateerde tools

Meer html-tools

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool

Probeer ook

Probeer ook