#106: MutationObserver — Node-Hook-basiertes Mutation Tracking (Non-Visual-Optimized) #106
Labels
No labels
bug
docs
feature
housekeeping
html-spec
performance
react-compat
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
glow-all/true-headless-browser#106
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Problembeschreibung
MutationObserver ist aktuell ein noop-Shim (
observe() {},disconnect() {},takeRecords() []). React, Vue 3, Angular und viele andere Frameworks verlassen sich auf MutationObserver fur:Ohne echten MutationObserver: Framework-Fehler, Memory-Leaks durch nie-feuernde Callbacks, kaputtes Change-Detection.
Architektur-Analyse
Aktueller Stand
Ziel-Architektur — Non-Visual-Optimized
Non-Visual Optimierungen
attributeFiltergenannten Attribute werden getrackt — kein Full-ScancharacterDataOldValue: truespeichert nur den alten Wert wenn angefordertRoot Causes
appendChild,removeChild,setAttribute,textContent-Setter erzeugen keine MutationRecordsobserve()mussen eine Registry von Target→Observer-Verbindungen pflegenLosungsansatze
Option A (empfohlen): Node-Hook-basiertes Mutation Tracking
Kernidee: MutationRecords werden in
appendChild,removeChild,setAttribute,textContent,data-Setter erzeugt. Diese Records werden in einer globalen Queue gesammelt, die bei der nachsten Mikrotask ausgeliefert wird.Teil 1: MutationRecord-Klasse
Teil 2: MutationObserver-Klasse
Teil 3: Hooks in Node/Element
Vorteile:
try { mutationObserver.observe(el, { childList: true }) }funktioniertappendChild→ Mikrotask → Callback feuertattributeFilterspart Arbeit (nur beobachtete Props tracken)Nachteile:
disconnect()und GC gesaubert werden (WeakRef?)Option B: Proxy-basiertes Mutation Tracking
Wrapper um Node.prototype mit Proxy, der alle mutationstrackenden Methoden abfangt.
Problem: Proxy auf Prototype ist extrem langsam (jeder Methoden-Call durchlault Proxy-Trap). Fur Headless nicht akzeptabel.
Option C: Polling-basiertes Tracking
setInterval-Ansatz: Vergleiche DOM-Baum alle 50ms, diff zum letzten Snapshot.
Problem: CPU-intensiv (O(n^2) Vergleich), Timing falsch (nicht Mikrotask-basiert), Frameworks erwarten korrekte Mikrotask-Semantik.
Entscheidung: Option A
useEffectwartet auf Mikrotask-Queue. Proxy oder Polling liefern falsches Timing.target → Set<Observer>ermoglicht O(1) Lookup bei notify und automatische GC.attributeFilterspart signifikant Arbeit: Bei ungefilterten Attributen (~100 pro Seite) vsattributeFilter: ["class"](1 pro Seite) — Faktor 100x.Akzeptanzkriterien
new MutationObserver(cb)erstellt Observerobserver.observe(el, { childList: true })registriert childList-TrackingappendChilderzeugt childList-Record mitaddedNodesremoveChilderzeugt childList-Record mitremovedNodessetAttribute()erzeugt attributes-RecordremoveAttribute()erzeugt attributes-RecordtextContent = "..."erzeugt characterData-RecordText.data = "..."erzeugt characterData-RecordtakeRecords()gibt ausstehende Records zuruckdisconnect()stoppt alle Beobachtungensubtree: truebeobachtet Kindes-KinderattributeFilter: ["class"]filtert auf class-AnderungenattributeOldValue: truespeichert alten WertcharacterDataOldValue: truespeichert alten TexttakeRecords()leert den internen PufferBetroffene Dateien
src/dom/mutation-observer.tssrc/dom/node.tssrc/dom/event-target.tssrc/dom/index.tssrc/runtime-isolation.tstests/unit/dom-mutation.test.tsDependencies
Querverweise
references/non-visual-dom-opti.md— Non-Visual-Optimierungs-ProtocolTechnische Risiken
queueMicrotask()nach batch-Mutationen.subtree: truebedeutet Rekursion bei jedem appendChild/removeChild. Losung: WeakMap-Registry pro Node, kein Rekursions-Scan.disconnect()lost Referenzen, und WeakRef fur internes Tracking.Performance-Impact
attributeFilterals Set fur O(1) Check.Testplan
Unit-Tests (20+)
Integration-Tests (3+)
✅ Resolved in commit
440573b#106: MutationObserver vollstandig implementiert — MutationRecord, MutationObserver, MutationRegistry mit Mikrotask-Queueing, Node-Hooks fur childList/attributes/characterData
#109: Custom Elements Lifecycle — connectedCallback/disconnectedCallback/attributeChangedCallback, Parser-Integration via _customElementsRegistry, attachShadow in OwnDOM
#105/#107/#108/#110: Bereits implementiert (99 Tests grun)
Tests: 247 pass, 0 fail