https://www.youtube.com/watch?v=8aGhZQkoFbQ
Event Loop 지연과 관련된 Youtube 내용을 정리해보자.
자바스크립트의 이벤트는 어떻게 동작하지에 대한 궁금증이 생겨 이 부분에 대해서 확인해보았다.
처음의 시작은 자바스크립트란 무엇인가에 대한 물음이였고 그에 대한 간략한 정의는 싱글 스레드, 넌 블럭킹, 비동기, 동시성 언어란 추상적인 내용이였다.
상세한 부분들을 좀 더 찾아보았고
heap, stack 등과 같은 기본적인 JS에 대한 부분은 이해가 갔으며 좀 더 깊게 학습하기 위해 setTimeout이라는 Callback 함수를 V8 소스를 Clone하여 찾아보니 존재하지 않았다.
JavaScript 처리시 브라우저 제공사들의 WebAPI를 호출한다는 것을 알게 되었다.
또한, event loop와 callback queue에 대해서 알게 되었다.
콜스택이란 무엇인지 확인해보니 자바스크립트는 하나의 스레드 기반으로 동작하였고 이것은 하나의 콜 스택으로 처리된다는 것이다. 이것이 의미하는 것은 하나의 코드를 하나의 시간에 처리한다는 것이다.(한번에 한 가지)
콜스택에 대한 시각화 예제 (Youtube 영상이 이해하기 쉽게 잘 나와있음) stack에 메소드 수행에 대한 부분이 추가되면 pop의 과정으로 하나씩 수행된다.
하나의 예로 동일 함수를 재귀 호출하였을 경우 스택 최대 사이즈 오류가 발생된다.
여기서 질문이 생기는데 무엇이 지연을 발생 시키지에 대한 물음이며 블록킹에 대해서 알아야 할 필요가 있다.
ajax 코드 예제와 같이 브라우저 기반에서 동작될 경우 처음 요청이 지연을 발생 시킬 경우 다음 작업이 진행되지 않고 대기 상태가 발생된다.
여기서 문제란 무엇인가? 브라우저에서 블록킹 방식으로 수행되기 때문이다.
이것을 해결하기 위한 방법은 무엇인가? 비동기 Callback 함수 호출 방식이 하나의 방법일 것이다.
비동기 Callback 방식으로 코드를 예시와 같이 수행할 경우 중간에 있는 호출이 블록킹 되지 않고 처리된다.
내부적으로 블록킹 되지 않고 처리하기 위해 Event Loop를 사용한다.
하지만 비동기로 처리하더라도 Callback Queue에 쌓인 Task가 지연을 발생 시킬 경우 문제는 발생된다.
브라우저는 Rendering 위해서 Render Queue를 사용하며 Callback Queue에 의해 지연이 발생될 경우 브라우저 Rendering에 지연이 발생 될 수 있다.
또 한가지 예로 스크롤 이벤트 처리시 Callback Queue에 많은 event가 발생되기 때문에 지연에 대한 처리 Queue가 발행될 경우 이슈가 있다.
개인적 정리
비동기 Callback 방식으로 수행한다고 하더라도 처리 지연 로직이 코드내에 선언될 경우 성능 저하는 피할 수 없다.
또한 빈번한 Event Queue 발생으로 인한 처리 수행시에도 성능에 지연을 유발 시킬 수 있다.
