Problem mit Javascript Single Thread, der Update von DOM blockiert

[Rolf B]

Hallo Bert,

JavaScript hat zwei Queues - die EventLoop (Makrotasks) und die Mikrotasks.

Makrotasks kommen von DOM Events und setTimeout oder setInterval.

Mikrotasks kommen von Promises, async/await oder queueMicrotask().

Nachdem ein Makrotask verarbeitet wurde, wird Queue der aufgelaufenen Mikrotasks geleert. Danach kommt der nächste Makrotask.

D.h. setInterval(..., 0) und Promise.resolve().then(...) erzeugen beide einen asynchronen Eintrag. Aber das Promise läuft schon los, bevor der Browser seinen Paintjob erledigen kann. Denn das ist ein Teil der Makrotask-Schleife.

Wenn Du also anzeigen willst, dass dein Programm rechnet, musst Du setTimeout(..., 0) verwenden. Machst Du es mit Promise.resolve(), rennt dein Langläufer los bevor dein "Bitte warten" angezeigt wird.

Unser Wiki hat dazu leider keinen Artikel. Ich könnte einen schreiben, aber das wäre dann eine Übersetzung andererer Internetquellen und es wäre sicher auch sehr viel Arbeit. Deutsche Texte findet man, wenn nach "mikrotask makrotask" sucht, erstaunlich wenig.

Das hier scheint recht ausführlich. MDN hat natürlich auch was zu sagen, als Übersicht und mit Tiefgang. Aber nicht auf deutsch.

Rolf