자바스크립트 이벤트 루프와 워커들

 

서비스 워커와 웹워커, 그리고 자바스크립트 비동기 타이머 api 의 차이를 알아보다가 다시 보게된 영상

 

비동기 타이머 api(setTimeout, setInterval)는 별도의 쓰레드 없이 동작한다. 하지만 메인 쓰레드에서 잠시 벗어나 멀티 쓰레드 처럼 보일 뿐 콜백 함수는 결국 메인쓰레드에서 실행된다.

 

자바스크립트 엔진에는 콜백 큐가 있는데 모든 web api의 콜백 함수가 실행되기 기다리는 장소이다. 다시 말해 콜백 큐는 setTimeout이나 ajax나 DOM 이벤트 같은 api들의 콜백들이 처리되기 위해서 대기하는 곳.

콜백 큐의 특징은 자바스크립트 콜 스택이 비워졌을 때 콜 스택으로 진입하다는 점이다. 콜 스택은 자바스크립트의 메인쓰레드가 처리하는 작업들을 대기시키는 장소이다. 만약 콜 스택이 비어있지 않으면 비워질때까지 기다리며 콜백 큐에서 대기한다. web api 자체는 별도의 쓰레드에서 작업하지만 해당 콜백은 결국 메인쓰레드가 처리하기 때문에 web api들도 메인쓰레드에 부담을 주는 요인이 된다.

 

서비스 워커, 웹 워커는 모두 별도의 쓰레드에 실행되며 메인 쓰레드와 분리되 별도의 쓰레드에서 작업되기 때문에 성능이나 UX 면에서 장점이 많다.

 

서비스 워커와 웹워커의 차이점은 서비스 워커는 캐시 기능이 탑재되어 있어서 캐시된 데이터를 이용해 작동할 수 있다는 점이다. 마치 오프라인에서는 전에 받았던 data를 이용해서 오프라인에서도 작동해서 네이티브 앱처럼 보일 수 있다.

 

자바스크립트 메인쓰레드는 매우 귀한 자원이며 성능을 위해서는 최대한 효율적으로 사용해야 한다. 최신 브라우저는 기본적으로 빠르지만 더욱 방대한 데이터와 연산을 다뤄야 하는 현대의 웹앱에서는 이 조차도 때로는 부족할 수 있기 때문에 기본적으로 워커들을 사용하여 성능에서 많은 장점을 취하는게 서비스 운영에 도움이 될 것이다.