Meta tags:
description=In der schnelllebigen Welt der Webentwicklung ist die Effizienz des Seitenladens entscheidend. JavaScript, ein Grundpfeiler der clientseitigen Programmierung…;

Headings (most frequently used words):

async, defer, das, attribut, von, was, ist, vorteile, codebeispiel, verwenden, scripts, wie, ein, einfaches, skript, parsing, blockiert, verstehen, nutzen, modul, skripte, werden, standardmäßig, zurückgestellt, vs, auf, einen, blick, fazit, übungen, und, kompromisse, der, verwendung, praktisches, beispiel, entscheidungen, beim, laden, skripten,

Text of the page (most frequently used words):
und (69), das (52), async (41), defer (35), #script (27), dom (27), die (26), html (23), der (23), sie (21), wird (21), skripte (19), skript (19), ist (19), api (19), javascript (18), #lernen (16), ausgeführt (16), parsing (15), werden (11), attribut (11), von (11), für (10), wie (10), ein (10), dem (10), laden (9), nicht (9), src (9), web (8), auf (8), browser (8), attribute (8), des (8), methoden (8), reihenfolge (7), den (7), wenn (7), verwenden (7), tools (6), was (6), ohne (6), aus (6), skripten (6), sich (6), kopieren (6), heruntergeladen (6), and (6), w3docs (5), übungen (5), abgeschlossen (5), eine (5), vor (5), zuerst (5), lodash (5), nach (5), download (5), einführung (5), module (5), body (5), head (5), tag (5), string (5), events (5), formatter (5), color (5), alle (4), json (4), code (4), generator (4), probier (4), css (4), modul (4), blockiert (4), this (4), page (4), ressourcen (4), domcontentloaded (4), oder (4), führt (4), dokument (4), dass (4), richtige (4), garantiert (4), seite (4), geparst (4), noch (4), hintergrund (4), bei (4), blockieren (4), dokuments (4), bevor (4), example (4), title (4), width (4), content (4), meta (4), elemente (4), shadow (4), fetch (4), encoder (3), editor (3), quizze (3), php (3), einen (3), standardmäßig (3), zurückgestellt (3), verstehen (3), onload (3), onerror (3), parsen (3), hat (3), dann (3), styles (3), selbst (3), https (3), ihre (3), davon (3), unabhängige (3), dokumentreihenfolge (3), sobald (3), verhalten (3), sind (3), type (3), runs (3), schnell (3), name (3), kann (3), the (3), scripts (3), flag (3), document (3), data (3), objekte (3), event (3), eigenschaften (3), promise (3), mit (3), funktionen (3), function (3), objekt (3), operatoren (3), entwickler (2), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), bücher (2), snippets (2), fazit (2), blick (2), nutzen (2), einfaches (2), load (2), beforeunload (2), unload (2), unterbricht (2), erscheinen (2), hält (2), ausführung (2), skripts (2), bis (2), parser (2), unabhängig (2), anderen (2), wozu (2), dienen (2), verwendung (2), webentwicklung (2), entscheidend (2), dieser (2), können (2), performance (2), optimierung (2), fehler (2), hier (2), beide (2), wurde (2), geladen (2), min (2), wichtig (2), aber (2), ausführungsreihenfolge (2), weder (2), app (2), abhängige (2), analysetools (2), werbung (2), vollständig (2), nein (2), tracker (2), imports (2), after (2), automatisch (2), zurückgestelltes (2), hinzufügen (2), richtigen (2), möglich (2), voneinander (2), abhängen (2), gesamte (2), bereit (2), vorteile (2), com (2), testing (2), device (2), initial (2), scale (2), viewport (2), utf (2), charset (2), lang (2), doctype (2), codebeispiel (2), lädt (2), erst (2), ereignis (2), während (2), blockierend (2), herunterzuladen (2), fort (2), rest (2), platzieren (2), big (2), render (2), workers (2), file (2), suche (2), muster (2), quantoren (2), anker (2), flags (2), components (2), animationen (2), url (2), microtasks (2), formulare (2), benutzerdefinierte (2), ereignisse (2), klassen (2), arrays (2), generatoren (2), advanced (2), await (2), fehlerbehandlung (2), promises (2), chaining (2), error (2), erweitern (2), handling (2), class (2), prototypes (2), interaktive (2), property (2), object (2), arrow (2), new (2), syntax (2), variablen (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, gemacht, sprache, datenschutzrichtlinie, kontakt, über, uns, unternehmen, üben, kostenlose, tutorials, beispiele, seit, 2014, next, previous, yes, helpful, prüfen, sofort, führen, zurück, seine, arbeit, bedeutet, völlig, ermöglicht, gleichzeitig, fortzusetzen, verwendet, steuern, indem, herunterladen, abschluss, parsings, gewartet, übung, effektive, tags, moderne, durch, anwenden, schnellere, seitenladezeiten, bessere, benutzererfahrung, gewährleisten, asynchrone, dreht, entwicklung, effizienter, benutzerorientierter, webanwendungen, informationen, zum, bilder, zur, reaktion, deren, erfolg, finden, unter, warten, diese, umstellen, würden, bestünde, risiko, fehlschlägt, weil, cdn, jsdelivr, net, npm, stellen, dienstprogrammbibliothek, sowie, eigene, datei, abhängt, wahl, sequenziell, praktisches, beispiel, entscheidungen, beim, gesamten, benötigt, eigenständig, hängt, vom, einfache, faustregel, geeignet, verfügbar, wann, neu, modulen, lesen, opt, into, soon, its, are, ready, deferred, automatically, order, verhält, müssen, stattdessen, auszuführen, fügen, explizit, hinzu, unerlässlich, eingehalten, damit, standardwahl, ihren, anwendungscode, vorhanden, bleiben, ebenfalls, herunter, unterschied, liegt, zwar, unmittelbar, ausgelöst, zurückgestellte, behalten, außerdem, erste, stets, zweiten, welches, vollständigen, zeitpunkt, gehen, daher, spätere, bereits, existieren, mehreren, dasjenige, niemals, keine, garantierte, moment, gut, läuft, weiter, kompromisse, dadurch, eignet, hervorragend, aufeinander, angewiesen, andere, fire, forget, einem, weist, fährt, zeiten, variieren, unvorhersehbarer, möglicherweise, sowohl, als, auch, betreffen, nur, erfordern, inline, blöcken, ignoriert, externe, historische, workaround, bestand, darin, ganz, unten, bieten, sauberere, lösung, bleibt, mehr, benutzer, starrt, halb, aufgebaute, einer, langsamen, verbindung, dies, klassische, leere, problem, ihm, sehen, wurden, daraus, ergeben, zwei, konsequenzen, user, can, see, yet, pauses, here, until, downloads, before, trifft, seitenaufbau, sofern, setzt, restlichen, direkten, einfluss, darauf, nutzbar, mitten, vorgang, ermöglichen, ihnen, mitzuteilen, artikel, erklärt, gewöhnliche, blockierende, ändern, warum, jedes, option, wählen, schnelllebigen, welt, effizienz, seitenladens, grundpfeiler, clientseitigen, programmierung, muss, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, console, history, screen, orientation, push, webgl, battery, animations, apis, regexp, sticky, position, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, ende, unicode, klasse, zeichenklassen, regex, regular, expressions, styling, slots, komposition, template, element, custom, elements, animation, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, server, sent, xmlhttprequest, ursprungsübergreifende, anfragen, abbruch, fortschritt, formdata, network, requests, canvas, references, loop, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, resource, loading, methode, submit, clipboard, change, input, cut, copy, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, scrolling, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, auslösen, standard, browseraktionen, delegation, bubbling, capturing, introduction, koordinaten, fenstergrößen, scrollen, verändern, knoteneigenschaften, typ, inhalt, getelement, queryselector, browserumgebung, spezifikationen, streams, filereader, blob, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, kommunikation, popups, window, frames, windows, polyfills, transpiler, bigint, currying, eval, proxy, reflect, miscellaneous, dynamische, export, import, modules, iteratoren, generators, iteration, promisification, callbacks, try, catch, mixins, checking, instanceof, eingebaute, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, native, prototypale, vererbung, inheritance, widgets, debugging, barrierefreiheit, kompatibilität, manipulationsbibliotheken, fortgeschrittene, techniken, manipulationstechniken, traversieren, arbeiten, manipulieren, auswählen, knoten, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, settimeout, setinterval, nfe, globales, alte, var, scope, parameter, spread, rekursion, stack, tojson, datum, uhrzeit, destructuring, assignment, keys, values, entries, weakmap, weakset, map, set, iterables, array, strings, math, zahlen, primitiven, types, optional, konstruktor, operator, primitiv, konvertierung, symbol, typen, garbage, collection, objektmethoden, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, use, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,

Text of the page (random words):
scripts async defer javascript lernen w3docs w3docs bücher html lernen css lernen javascript lernen git lernen java lernen php lernen python lernen kurse quizze übungen snippets tools general tools html editor password generator html encoder code diff json beautifier alle 13 color tools color picker color converter color mixer color hex colors hsl alle 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder alle 19 code formatters javascript formatter css formatter html formatter json formatter php formatter w3docs durchsuchen k de english en deutsch de русский ru français fr español es português pt italiano it anmelden javascript lernen javascript basic einführung javascript verwenden js kommentare js mit dom js use strict js variablen js datentypen js typkonvertierungen js interaktive funktionen js operatoren js vergleichsoperatoren js logische operatoren js nullish coalescing js bedingte operatoren js switch js schleifen js funktionen js funktionsausdrücke js arrow functions js es6 objects the basics js objects js objekte kopieren js objektmethoden this js garbage collection js symbol typen js objekt zu primitiv konvertierung js konstruktor operator new js optional chaining data types js methoden von primitiven js zahlen js math js strings js arrays js array methoden js iterables js map und set js weakmap und weakset js object keys values entries js destructuring assignment js datum und uhrzeit js json methoden tojson advanced functions js rekursion und stack js rest parameter und spread syntax js variablen scope js das alte var js globales objekt js function objekt nfe js die new function syntax js settimeout und setinterval js dekoratoren und weiterleitung call apply js debounce throttle js function binding js arrow funktionen vertieft js closures object properties configuration js property flags und deskriptoren js property getter und setter javascript html dom dom einführung die dom knoten dom elemente auswählen den dom manipulieren arbeiten mit styles im dom event handling im dom dom traversieren dom manipulationstechniken formulare im dom verwenden fortgeschrittene dom techniken dom manipulationsbibliotheken dom browser kompatibilität dom barrierefreiheit debugging und tools performance optimierung interaktive elemente und widgets prototypes inheritance js prototypale vererbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api scripts async defer in der schnelllebigen welt der webentwicklung ist die effizienz des seitenladens entscheidend javascript ein grundpfeiler der clientseitigen programmierung muss wo sie ein script platzieren und wie sie es laden hat einen direkten einfluss darauf wie schnell ihre seite nutzbar wird standardmäßig können skripte den browser mitten im render vorgang blockieren die attribute async und defer ermöglichen es ihnen dem browser mitzuteilen javascript im hintergrund herunterzuladen dieser artikel erklärt wie gewöhnliche blockierende skripte sich verhalten was async und defer ändern warum modul skripte automatisch zurückgestellt werden und wie sie für jedes skript die richtige option wählen wie ein einfaches skript das parsing blockiert ein script ohne async oder defer ist render blockierend wenn der html parser auf das tag trifft hält er den seitenaufbau an lädt das skript sofern es ein src hat führt es vollständig aus und setzt erst dann das parsing des restlichen dokuments fort p content before script p script src big js script parsing pauses here until big js downloads and runs p content after script the user can t see this yet p kopieren daraus ergeben sich zwei konsequenzen das skript kann dom elemente die nach ihm erscheinen nicht sehen da sie noch nicht geparst wurden der benutzer starrt auf eine halb aufgebaute seite während das skript heruntergeladen wird bei einer langsamen verbindung ist dies das klassische leere seite problem der historische workaround bestand darin skripte ganz unten im body zu platzieren async und defer bieten eine sauberere lösung das tag bleibt im head blockiert aber nicht mehr sowohl async als auch defer betreffen nur externe skripte sie erfordern das attribut src bei inline script blöcken werden sie ignoriert das async attribut verstehen was ist das async attribut wenn sie das attribut async zu einem script tag hinzufügen weist es den browser an das skript im hintergrund herunterzuladen ohne das html parsing zu blockieren sobald der download abgeschlossen ist unterbricht der browser das parsing führt das skript aus und fährt dann fort da download zeiten variieren werden async skripte ausgeführt sobald sie bereit sind in unvorhersehbarer reihenfolge möglicherweise bevor der rest des dokuments geparst wurde dadurch eignet sich async hervorragend für unabhängige skripte die weder auf den dom noch aufeinander angewiesen sind analysetools werbung und andere fire and forget tracker codebeispiel async verwenden doctype html html lang en head meta charset utf 8 meta name viewport content width device width initial scale 1 0 title async example title head body h1 testing async h1 script async src https example com async script js script body html kopieren probier es selbst vorteile und kompromisse von async nicht blockierend das html parsing läuft weiter während das skript heruntergeladen wird wird so schnell wie möglich ausgeführt das skript wird in dem moment ausgeführt in dem der download abgeschlossen ist gut für unabhängige skripte keine garantierte reihenfolge bei mehreren async skripten wird dasjenige zuerst ausgeführt das zuerst heruntergeladen wird verwenden sie async niemals für skripte die voneinander abhängen kann vor dem dom ausgeführt werden es kann ausgeführt werden bevor das parsing abgeschlossen ist gehen sie daher nicht davon aus dass spätere elemente bereits existieren das defer attribut nutzen was ist das defer attribut das attribut defer lädt das skript ebenfalls im hintergrund herunter ohne das parsing zu blockieren der unterschied liegt im zeitpunkt der ausführung ein zurückgestelltes skript wird erst nach dem vollständigen parsen des html dokuments ausgeführt und zwar unmittelbar bevor das ereignis domcontentloaded ausgelöst wird zurückgestellte skripte behalten außerdem ihre dokumentreihenfolge das erste defer tag wird stets vor dem zweiten ausgeführt unabhängig davon welches zuerst heruntergeladen wird damit ist defer die richtige standardwahl für ihren anwendungscode der gesamte dom ist garantiert vorhanden und abhängige skripte bleiben in der richtigen reihenfolge codebeispiel defer verwenden doctype html html lang en head meta charset utf 8 meta name viewport content width device width initial scale 1 0 title defer example title head body h1 testing defer h1 script defer src https example com defer script js script body html kopieren probier es selbst vorteile der verwendung von defer dom bereit das gesamte html dokument wird geparst bevor das skript ausgeführt wird reihenfolge eingehalten skripte werden in dokumentreihenfolge ausgeführt was für skripte die voneinander abhängen unerlässlich ist modul skripte werden standardmäßig zurückgestellt ein script type module verhält sich automatisch wie ein zurückgestelltes skript sie müssen defer nicht hinzufügen es wird geladen ohne das parsing zu blockieren und wird nach dem parsen des dokuments in der richtigen reihenfolge ausgeführt um ein modul stattdessen so schnell wie möglich auszuführen das async verhalten fügen sie async explizit hinzu deferred automatically runs after parsing in order script type module src app js script opt into async runs as soon as it and its imports are ready script type module async src tracker js script kopieren wenn sie neu bei modulen sind lesen sie die einführung in module async vs defer auf einen blick verhalten async defer blockiert das html parsing nein nein wann wird es ausgeführt sobald der download abgeschlossen ist nach dem parsing vor domcontentloaded ausführungsreihenfolge was zuerst heruntergeladen wird dokumentreihenfolge garantiert dom vollständig verfügbar nicht garantiert ja geeignet für unabhängige skripte analysetools werbung app code abhängige skripte eine einfache faustregel verwenden sie async wenn das skript eigenständig ist es hängt weder von anderen skripten noch vom dom ab verwenden sie defer wenn das skript den gesamten dom benötigt oder wenn die ausführungsreihenfolge wichtig ist praktisches beispiel entscheidungen beim laden von skripten stellen sie sich vor sie laden eine dienstprogrammbibliothek wie lodash sowie ihre eigene datei die davon abhängt da die reihenfolge hier wichtig ist ist defer die richtige wahl beide werden im hintergrund heruntergeladen werden aber nach dem parsing sequenziell ausgeführt script defer src https cdn jsdelivr net npm lodash lodash min js script script defer src script js script kopieren probier es selbst hier ist garantiert dass lodash min js vor script js ausgeführt wird und beide warten bis die seite geparst wurde wenn sie diese auf async umstellen würden bestünde das risiko dass script js zuerst ausgeführt wird und fehlschlägt weil lodash noch nicht geladen ist informationen zum laden von nicht skript ressourcen bilder styles und zur reaktion auf deren erfolg oder fehler finden sie unter ressourcen laden onload und onerror fazit die effektive verwendung der attribute async und defer in script tags ist für die moderne webentwicklung entscheidend durch das richtige verstehen und anwenden dieser attribute können entwickler schnellere seitenladezeiten und eine bessere benutzererfahrung gewährleisten das asynchrone laden von skripten dreht sich um performance optimierung und die entwicklung effizienter benutzerorientierter webanwendungen übungen übung wozu dienen die attribute async und defer in javascript wozu dienen die attribute async und defer in javascript die attribute async und defer werden verwendet um das laden von skripten zu steuern indem das herunterladen des skripts auf den abschluss des html parsings gewartet wird das attribut async in javascript bedeutet dass das skript völlig unabhängig von anderen skripten ausgeführt wird und es dem dokument ermöglicht das parsing gleichzeitig fortzusetzen das attribut defer hält die ausführung des skripts zurück bis der html parser seine arbeit abgeschlossen hat und führt das skript dann aus die attribute async und defer führen die skripte in der reihenfolge aus in der sie im dokument erscheinen ohne async oder defer unterbricht der browser das parsen von html und führt skripte sofort aus prüfen was this page helpful yes no previous page domcontentloaded load beforeunload unload next ressourcen laden onload und onerror on this page wie ein einfaches skript das parsing blockiert das async attribut verstehen das defer attribut nutzen modul skripte werden standardmäßig zurückgestellt async vs defer auf einen blick fazit übungen w3docs kostenlose tutorials beispiele übungen snippets und quizze für das web seit 2014 bücher html lernen css lernen javascript lernen git lernen java lernen php lernen python lernen üben übungen quizze probier editor tools html editor password generator html encoder code diff json beautifier unternehmen über uns kontakt datenschutzrichtlinie sprache english deutsch русский français español português italiano 2026 w3docs alle rechte vorbehalten für entwickler gemacht