notes from a great talk What the heck is the event loop anyway? | Philip Roberts
Heap is where memory allocation happens
Things like setTimeout/DOM/Http doesnt exist in V8 - Chrome runtime
- V8 runtime: heap(sterta - nieuporzdkowany obrzar pamieci) + stack(stos klatek)
- Web APIs (DOM ajax etc)
- callback queue (kolejka wiadomości)
- event loop
JS jest językiem jednowątkowym więc wszystkie wywołania funkcji lądują na stosie. Może robić jedną rzecz na raz.
Stos wywołań mozesz podejrzec w konsoli developerskiej, lub przy rzucaniu wyjątku.
Kiedy wywołujesz funkcję, idzie ona na górę stosu (push
). Kiedy funkcja zwraca wartość, zostaje sciagnieta ze stosu (pop
).
Mozesz łatwo zapchac stack jesli wywołasz funkcję ktora wywoluje sama siebie
What happens if thigns are slow? BLOCKING - no strict definition - it's slow.
Jesli http zapytania bylyby synchroniczne, podczas ich wywolan uzytkownik mialby zablokowany interfejs.
Sposob zeby sobie poradzic - asynchronous callbacks. Jak to działa?
JS runtime does one thing at time. Ale przegladark to wiecej niz JS runtime - masz webAPI które są wielowątkowe. In node instead of webapi you have C++ API.
setTimeout
doesnt live in V8 runtime. Browser kick off the timer. When the webapis browser is done it pushes the callback to the task queue.
Event loop is simple - looks on a stack. Jesli stos jest pust bierze pierwsze zadanie z kolejki i wrzuca na stos do wykonania.
setTimeout(() => {}, 0)
- callback bedzie wykonany wtedy, gdy stos bedzie pusty - odraczasz wykoanie funkcji do tego momentu.
Nie kazdy callback idzie na kolejke (np synchroniczny callback przekazany do map()
nie pojdzie
Co 16ms przegladark odpala callback aby wyrenderować widok. Jesli stack bedzie zawalony, render nie wskoczy z kolejki do stacku i nie wywola się.