Meta tags:
description=Performance-Optimierung ist entscheidend in der Webentwicklung. Dieser Leitfaden behandelt Techniken zur Optimierung des DOM für schnelle und…;

Headings (most frequently used words):

dom, layout, thrashing, vermeiden, alle, performance, optimierung, in, der, webentwicklung, warum, operationen, langsam, sind, zugriffe, minimieren, effiziente, ereignisbehandlung, verstehen, und, änderungen, bündeln, erzwungenes, synchrones, best, practices, häufige, fallstricke, fazit, übungen, was, ist, die, lösung, erst, lesevorgänge, dann, schreibvorgänge, arbeit, mit, requestanimationframe, planen, document, createdocumentfragment, verwenden, beispiel,

Text of the page (most frequently used words):
und (80), dom (52), der (28), die (25), das (24), #layout (24), document (19), api (19), browser (18), javascript (17), lernen (16), alle (14), ist (14), box (14), einen (13), html (12), event (12), einer (12), const (12), für (11), performance (11), mit (11), ein (11), den (11), von (11), sie (10), lesen (10), bündeln (9), optimierung (9), nicht (9), tools (8), web (8), auf (8), anstatt (8), des (8), reflow (8), kopieren (8), the (8), methoden (8), vermeiden (7), thrashing (7), eine (7), events (7), requestanimationframe (7), width (7), schreiben (7), wird (7), schreibvorgänge (7), getelementbyid (7), fragment (7), container (7), div (7), änderungen (6), verwenden (6), lesevorgänge (6), eigenschaften (6), element (6), offsetwidth (6), read (6), knoten (6), list (6), w3docs (5), übungen (5), css (5), sind (5), elemente (5), was (5), zur (5), styles (5), createdocumentfragment (5), techniken (5), listener (5), schleife (5), wenn (5), neu (5), frame (5), dann (5), and (5), bei (5), aus (5), dem (5), einem (5), async (5), write (5), appendchild (5), boxes (5), dieser (5), string (5), formatter (5), color (5), json (4), code (4), generator (4), erzwungenes (4), synchrones (4), minimieren (4), sich (4), arbeit (4), offsetheight (4), queryselector (4), kann (4), pro (4), als (4), style (4), statt (4), eigenschaft (4), einzigen (4), iteration (4), row (4), items (4), variablen (4), shadow (4), fetch (4), einführung (4), encoder (3), editor (3), quizze (3), php (3), häufige (3), zugriffe (3), warum (3), langsam (3), this (3), page (3), interaktive (3), debugging (3), delegation (3), ereignisse (3), inline (3), seine (3), ihre (3), vor (3), innerhalb (3), eines (3), profilieren (3), advanced (3), animieren (3), nutzen (3), jedes (3), lesevorgang (3), erst (3), oder (3), einfügen (3), verändern (3), diese (3), klassen (3), nach (3), script (3), sofort (3), auslösen (3), ohne (3), seite (3), durchlauf (3), arrays (3), let (3), for (3), animationen (3), repaint (3), every (3), loop (3), schneller (3), handling (3), elements (3), length (3), grenze (3), webentwicklung (3), flag (3), data (3), objekte (3), promise (3), funktionen (3), function (3), objekt (3), operatoren (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), probier (2), python (2), java (2), git (2), bücher (2), snippets (2), fazit (2), fallstricke (2), best (2), practices (2), verstehen (2), effiziente (2), ereignisbehandlung (2), operationen (2), widgets (2), welche (2), folgenden (2), wichtig (2), lässt (2), rendering (2), zwischenspeichern (2), delegieren (2), schreibvorgängen (2), gruppieren (2), aktualisierungen (2), aufbauen (2), panel (2), devtools (2), zeigt (2), reflows (2), opacity (2), transform (2), margin (2), eigenen (2), schreibvorgang (2), berechnen (2), durch (2), einmal (2), finden (2), dokument (2), ändern (2), wieder (2), werden (2), klasse (2), viele (2), auszulösen (2), bevorzugen (2), ausführt (2), defer (2), nächsten (2), forces (2), now (2), change (2), neuberechnung (2), nur (2), aktiven (2), sodass (2), verarbeitet (2), body (2), head (2), title (2), changes (2), hinzugefügt (2), callbacks (2), werte (2), führt (2), kurz (2), widths (2), foreach (2), phase (2), apply (2), map (2), queryselectorall (2), jeder (2), verarbeiten (2), elementen (2), unter (2), introduction (2), console (2), target (2), zuzuweisen (2), bubbling (2), wie (2), makerow (2), einmalig (2), strings (2), meisten (2), aber (2), position (2), engine (2), leitfaden (2), workers (2), file (2), suche (2), muster (2), quantoren (2), anker (2), flags (2), components (2), url (2), microtasks (2), formulare (2), benutzerdefinierte (2), generatoren (2), await (2), fehlerbehandlung (2), promises (2), chaining (2), error (2), erweitern (2), class (2), prototypes (2), property (2), object (2), arrow (2), new (2), syntax (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, entwickler, gemacht, sprache, datenschutzrichtlinie, kontakt, über, uns, unternehmen, üben, kostenlose, tutorials, beispiele, seit, 2014, next, previous, yes, helpful, prüfen, behandlung, mehrerer, ähnlicher, bessere, immer, lese, schreiboperationen, getrennt, durchführen, direkten, zugriff, manipulationen, übung, idee, reduzieren, schnell, darin, aufgabe, dieses, unterbrechen, referenzen, große, visuelle, einplanen, zweifelsfall, genau, stattfinden, vertiefen, ihr, werkzeugset, anschließend, techniques, manipulation, documentfragment, auslösende, left, großen, dynamischen, liste, anbringen, derselben, schleifeniteration, aufrufen, ergebnis, zwischenzuspeichern, goldene, regel, mal, folgt, gezwungen, synchron, gruppierung, erledigen, info, tatsächlichen, engpass, raten, siehe, optimieren, umfangreichen, bearbeitungen, teilbaum, entfernen, verbergen, außerhalb, bildschirms, display, none, trennen, gpu, zusammengesetzt, überspringen, paint, vollständig, anders, top, erlaubt, stilregeln, anzuwenden, zuweisung, toggles, attribut, tags, hinzufügen, damit, weiter, parst, skript, bereitstellung, unabhängige, drittanbieter, skripte, kritisches, verzögern, wert, benötigt, verschieben, umstrukturieren, dass, allen, erfolgen, beim, getcomputedstyle, scrolltop, clientheight, clientwidth, offsettop, answer, height, queues, expanded, add, classlist, subtile, variante, stiländerung, sofortigen, layouts, zwingt, unmittelbar, baut, gegen, sichtbare, beeinflussen, abschließende, berührt, moderne, engines, ermöglichen, auch, aufruf, ähnlich, gebündelt, append, nodes, selbst, batch, update, item, textcontent, createelement, batching, doctype, beispiel, leichtgewichtiger, bildschirm, sichtbarer, angehängte, teil, dokuments, keine, auslöst, fertige, fügt, kinder, operation, halten, niemals, mittendrin, applied, same, callback, ideale, zeitpunkt, zusammengeführt, zwischenzeitliche, repaints, planen, all, interrupts, them, collect, measurement, first, zuerst, ausführen, lösung, interleaved, bad, then, invalidates, tritt, folge, abwechseln, erzwingt, vorherigen, löst, insgesamt, dies, skaliert, tausende, erfasst, automatisch, einrichten, listeners, wurden, mehr, dazu, dataset, clicked, log, closest, click, addeventlistener, one, handles, whole, including, rows, added, later, langen, listenelemente, jeweils, verschwendet, speicher, verlangsamt, hängt, gemeinsames, elternelement, nutzt, festzustellen, welches, kind, getroffen, wurde, basierend, hinweise, wahl, spezifischer, selektoren, gezieltes, gegenüber, tiefen, nachfahrenketten, span, selecting, fast, resolve, reference, once, outside, slow, queries, reads, oft, einzeln, einzufügen, allerdings, gehen, dabei, verloren, vertrauenswürdigen, eingaben, unsicher, innerhtml, bauen, sinnvoll, schleifenzähler, längen, berechnete, gehören, jedem, gelesen, lokale, einlesen, nachschlagen, variable, speichern, aufzurufen, elementreferenzen, überschreitet, günstigste, daher, weniger, davon, tun, entscheidende, erkenntnis, versucht, vorgänge, stellt, warteschlange, bevor, nächste, gerendert, unterbrochen, sobald, ausstehenden, muss, korrekte, antwort, liefern, erzwungene, flush, bezeichnet, ihn, provozieren, wurzel, probleme, zeichnet, pixel, farben, schatten, sichtbarkeit, geometrie, günstiger, dennoch, kostenlos, berechnet, größe, vorfahren, nachkommen, geschwister, ausbreiten, läuft, schnellen, zwischen, pipeline, browsers, wiederholte, überschreiten, problem, erklärt, konkrete, behebung, erraten, abstand, teuerste, ressource, anwendungen, zwingen, anzuhalten, seitengeometrie, elementpositionen, größen, neuzeichnen, pixeln, wer, sorglos, tut, bringt, anfühlen, sollte, ins, stottern, entscheidend, behandelt, schnelle, reaktionsschnelle, webanwendungen, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, history, screen, orientation, push, webgl, battery, animations, apis, regexp, sticky, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, name, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, ende, unicode, zeichenklassen, regex, regular, expressions, styling, slots, komposition, template, custom, animation, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, server, sent, xmlhttprequest, ursprungsübergreifende, anfragen, abbruch, download, fortschritt, formdata, network, requests, canvas, references, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, ressourcen, laden, onload, onerror, scripts, domcontentloaded, load, beforeunload, unload, resource, loading, ereignis, methode, submit, clipboard, input, cut, copy, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, scrolling, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, standard, browseraktionen, capturing, koordinaten, fenstergrößen, scrollen, attribute, knoteneigenschaften, typ, tag, inhalt, getelement, 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, imports, export, import, module, modules, iteratoren, generators, promisification, fehler, try, catch, mixins, checking, instanceof, eingebaute, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, native, prototypale, vererbung, inheritance, barrierefreiheit, kompatibilität, manipulationsbibliotheken, fortgeschrittene, manipulationstechniken, traversieren, arbeiten, manipulieren, auswählen, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, settimeout, setinterval, nfe, globales, alte, var, scope, rest, parameter, spread, rekursion, stack, tojson, datum, uhrzeit, destructuring, assignment, keys, values, entries, weakmap, weakset, set, iterables, array, 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, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,

Text of the page (random words):
t 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 performance optimierung in der webentwicklung performance optimierung ist entscheidend in der webentwicklung dieser leitfaden behandelt techniken zur optimierung des dom für schnelle und reaktionsschnelle webanwendungen das dom ist die mit abstand teuerste ressource die die meisten javascript anwendungen nutzen das lesen einer eigenschaft wie offsetheight kann den browser zwingen anzuhalten und die seitengeometrie neu zu berechnen das schreiben in den dom kann einen reflow neuberechnung von elementpositionen und größen und einen repaint neuzeichnen von pixeln auslösen wer das sorglos in einer schleife tut bringt eine seite die sich sofort anfühlen sollte ins stottern dieser leitfaden erklärt warum dom arbeit langsam ist und zeigt konkrete techniken zur behebung zugriffe minimieren layout thrashing vermeiden änderungen mit requestanimationframe und document createdocumentfragment bündeln und profilieren was sich nicht erraten lässt warum dom operationen langsam sind javascript läuft in einer schnellen engine aber der dom ist die grenze zwischen dieser engine und der rendering pipeline des browsers das wiederholte überschreiten dieser grenze ist das problem reflow layout der browser berechnet position und größe von elementen neu ein reflow eines elements kann sich auf seine vorfahren nachkommen und geschwister ausbreiten repaint der browser zeichnet pixel neu farben schatten sichtbarkeit ohne die geometrie zu verändern günstiger als ein reflow aber dennoch nicht kostenlos die entscheidende erkenntnis der browser versucht diese vorgänge für sie zu bündeln er stellt ihre schreibvorgänge in eine warteschlange und verarbeitet sie einmalig kurz bevor der nächste frame gerendert wird diese optimierung wird unterbrochen sobald sie eine layout eigenschaft lesen da der browser alle ausstehenden schreibvorgänge sofort verarbeiten muss um eine korrekte antwort zu liefern dieser erzwungene flush wird als synchrones erzwungenes layout bezeichnet und ihn in einer schleife zu provozieren ist die wurzel der meisten dom performance probleme dom zugriffe minimieren jedes lesen und schreiben einer eigenschaft überschreitet die js zu dom grenze die günstigste optimierung ist daher weniger davon zu tun elementreferenzen zwischenspeichern ein element einmal nachschlagen und in einer variable speichern anstatt bei jeder iteration document queryselector aufzurufen in lokale variablen einlesen schleifenzähler längen und berechnete werte gehören in javascript variablen nicht bei jedem durchlauf neu aus dem dom gelesen strings statt knoten bauen wenn sinnvoll innerhtml einmalig zuzuweisen ist oft schneller als viele knoten einzeln einzufügen allerdings gehen dabei event listener verloren und bei nicht vertrauenswürdigen eingaben ist es unsicher slow re queries and re reads the dom on every iteration for let i 0 i items length i document getelementbyid list appendchild makerow items i fast resolve the reference once outside the loop const list document getelementbyid list for let i 0 i items length i list appendchild makerow items i kopieren unter selecting dom elements finden sie hinweise zur wahl schneller spezifischer selektoren bevorzugen sie getelementbyid und gezieltes queryselector gegenüber tiefen nachfahrenketten wie div ul li span effiziente ereignisbehandlung einem langen listenelemente jeweils einen eigenen listener zuzuweisen verschwendet speicher und verlangsamt dom aktualisierungen event delegation hängt einen einzigen listener an ein gemeinsames elternelement und nutzt event target um festzustellen welches kind getroffen wurde basierend auf event bubbling one listener handles the whole list including rows added later document getelementbyid list addeventlistener click event const row event target closest li if row console log clicked row row dataset id kopieren dies skaliert auf tausende von elementen und erfasst automatisch elemente die nach dem einrichten des listeners hinzugefügt wurden mehr dazu unter event handling in the dom und introduction to browser events layout thrashing verstehen und vermeiden was ist layout thrashing layout thrashing tritt auf wenn sie lesen und schreiben von layout eigenschaften in schneller folge abwechseln jeder lesevorgang erzwingt ein synchrones layout um den vorherigen schreibvorgang zu verarbeiten eine schleife aus lesen schreiben lesen schreiben löst so pro iteration einen reflow aus anstatt insgesamt nur einen bad read offsetwidth forces layout then write invalidates it every loop const boxes document queryselectorall box boxes foreach box box style width box offsetwidth 10 px read write interleaved kopieren die lösung erst alle lesevorgänge dann alle schreibvorgänge alle lesevorgänge zuerst gruppieren dann alle schreibvorgänge ausführen der browser führt einen layout durchlauf für die lesevorgänge und einen für die schreibvorgänge durch const boxes document queryselectorall box 1 read phase collect every measurement first const widths boxes map box box offsetwidth 2 write phase now apply all changes no read interrupts them boxes foreach box i box style width widths i 10 px kopieren arbeit mit requestanimationframe planen requestanimationframe führt den callback kurz vor dem nächsten repaint aus der ideale zeitpunkt um dom änderungen zu schreiben sie werden in einem einzigen frame zusammengeführt anstatt zwischenzeitliche repaints auszulösen const element document getelementbyid box requestanimationframe const width element offsetwidth read element style width width 10 px write applied in the same frame kopieren halten sie bei animationen alle dom schreibvorgänge innerhalb des requestanimationframe callbacks und lesen sie niemals layout werte mittendrin dom änderungen bündeln document createdocumentfragment verwenden document createdocumentfragment ist ein leichtgewichtiger nicht im bildschirm sichtbarer container an ein fragment angehängte knoten sind nicht teil des aktiven dokuments sodass das aufbauen keine reflows auslöst wenn das fertige fragment der seite hinzugefügt wird fügt der browser alle seine kinder in einer einzigen operation ein ein reflow statt einem pro knoten beispiel doctype html html head title batching dom changes title head body div id container div script const container document getelementbyid container const fragment document createdocumentfragment for let i 0 i 40 i const div document createelement div div textcontent item i fragment appendchild div container appendchild fragment batch update script body html kopieren probier es selbst die schleife baut 40 elemente gegen das fragment auf ohne die sichtbare seite zu beeinflussen nur das abschließende container appendchild fragment berührt den aktiven dom sodass der browser einen einzigen layout durchlauf statt 40 ausführt moderne engines ermöglichen auch das einfügen eines arrays von knoten in einem aufruf mit container append nodes was ähnlich gebündelt verarbeitet wird erzwungenes synchrones layout vermeiden eine subtile variante von thrashing ist das lesen einer layout eigenschaft unmittelbar nach einer stiländerung was den browser zur sofortigen neuberechnung des layouts zwingt const box document getelementbyid box box classlist add expanded write queues a layout change const height box offsetheight read forces layout now to answer kopieren wenn der wert nicht sofort benötigt wird den lesevorgang mit requestanimationframe auf den nächsten frame verschieben oder den code so umstrukturieren dass alle lesevorgänge vor allen schreibvorgängen erfolgen häufige eigenschaften die beim lesen ein erzwungenes layout auslösen offsettop offsetwidth offsetheight clientwidth clientheight scrolltop und getcomputedstyle best practices nicht kritisches javascript verzögern das attribut defer zu script tags hinzufügen damit der browser das html weiter parst und das skript erst nach bereitstellung des dom ausführt async für unabhängige drittanbieter skripte verwenden klassen toggles statt inline styles bevorzugen das ändern einer css klasse erlaubt dem browser viele stilregeln in einem reflow anzuwenden anstatt einen reflow pro inline style zuweisung auszulösen transform und opacity animieren diese werden von der gpu zusammengesetzt und überspringen layout und paint vollständig anders als das animieren von width top oder margin trennen verändern wieder einfügen bei umfangreichen bearbeitungen einen teilbaum aus dem dokument entfernen oder mit display none verbergen außerhalb des bildschirms ändern und dann wieder einfügen erst profilieren dann optimieren das performance panel der browser devtools nutzen um den tatsächlichen engpass zu finden anstatt zu raten siehe dom debugging and tools i info die goldene regel alle dom lesevorgänge bündeln dann alle schreibvorgänge bündeln jedes mal wenn ein lesevorgang auf einen schreibvorgang folgt wird der browser gezwungen das layout synchron neu zu berechnen durch ihre gruppierung kann er die arbeit einmal pro frame erledigen häufige fallstricke document queryselector innerhalb einer schleife aufrufen anstatt das ergebnis zwischenzuspeichern offsetwidth offsetheight lesen und styles in derselben schleifeniteration schreiben für jedes element einer großen dynamischen liste einen eigenen event listener anbringen anstatt zu delegieren layout auslösende eigenschaften width left margin animieren anstatt transform opacity zu nutzen fazit dom performance lässt sich auf eine idee reduzieren der browser ist schnell darin seine rendering arbeit zu bündeln ihre aufgabe ist es dieses bündeln nicht zu unterbrechen referenzen zwischenspeichern events delegieren lesevorgänge vor schreibvorgängen gruppieren große aktualisierungen i...