JavaScript event loop
Event loop vizuálisan: call stack, task queue, microtask queue és renderelés – miért fut a Promise callback gyakran a setTimeout előtt?
Röviden
A JavaScript végrehajtás egyik kulcsmodellje az event loop. A call stack futtatja a jelenlegi JavaScriptet; a környezet eseményeket és aszinkron műveleteket kezel; a megfelelő queue-kból új callbackek akkor kerülnek futásra, amikor a stack felszabadul.
Mit jelent a javascript event loop?
A JavaScript végrehajtás egyik kulcsmodellje az event loop. A call stack futtatja a jelenlegi JavaScriptet; a környezet eseményeket és aszinkron műveleteket kezel; a megfelelő queue-kból új callbackek akkor kerülnek futásra, amikor a stack felszabadul.
Léptesd az event loopot
Call stack
main()
Microtask queue
Promise.then
Task queue
setTimeout
Kimenet
–
Hogyan működik a gyakorlatban?
Promise reaction/microtask feldolgozás jellemzően a jelenlegi task végén, új task előtt történik. Timer callback taskként érkezik, és a megadott delay minimum várakozást jelent, nem pontos futási időpontot. A böngésző renderinget is ütemez a főszál körül.
- Microtask queue túlzott önújratöltése is késleltetheti a következő taskot/renderinget.
- `setTimeout(fn, 0)` nem azonnali futtatás.
- Hosszú szinkron függvény blokkolja a main threadet.
- Event loop modell segít INP és UI responsiveness hibák értésében.
Gyakorlati fejlesztői szemlélet
Ha egy click „nem reagál”, nézd meg, mi foglalja a main threadet a click előtt és után. A hálózati Promise várakozás általában nem blokkol, a nagy szinkron JSON feldolgozás vagy render viszont igen.
Gyakori hibák és félreértések
- Event loopot párhuzamos JavaScript szálként elképzelni.
- Microtaskot és taskot egy queue-nak tekinteni.
- Timer delayből pontos real-time ütemezést feltételezni.
Források és szabványok
A technikai részletekhez elsődleges szabványokat és karbantartott hivatalos dokumentációt használok. Frameworkök, böngészők és webes API-k idővel változhatnak, ezért implementálás előtt mindig ellenőrizd az aktuális dokumentációt is.
Kapcsolódó ByBence Academy