Thread & service worker in JS

스레드란?

코드를 실행할 수 있는 각 단위

자바스크립트는 기본적으로 싱글 스레드 환경에서 실행됨. 이 말은 브라우저에서 자바스크립트 코드가 메인 스레드에서 실행된다는 뜻. 하지만, 자바스크립트는 Web Workers (예: Web Worker, Service Worker)와 같은 기능을 통해 병렬 작업을 처리할 수 있는 비동기적 작업 처리를 지원.

—> 즉, 자바스크립트는 기본적으로 싱글 스레드 환경에서 실행되지만, Web Worker와 같은 기능을 통해 병렬 작업을 처리할 수 있는 방법을 제공.

메인 스레드 :

브라우저에서 사용자 이벤트를 처리하고 디스플레이를 렌더링 및 페인팅하고 일반적인 웹 페이지나 앱을 구성하는 대부분의 코드를 실행하는데에 사용하는 스레드

—> 이렇게 많은 처리를 한 곳에서 하기 때문에 속도가 느리거나 무한 루프에 빠질 수 있음

그래서 자바스크립트에서 추가 스레드를 생성하는 방법을 제공함

이러한 기능을 웹 워커가 함. 무거운 작업을 분리된 스레드에서 처리할 수 있게 해줌

Service worker :

특정 사이트의 하나 혹은 그 이상의 페이지를 제어하는 스크립트, 웹 응용 프로그램, 브라우저, 네트워크 사이의 프록시 서버 역할을 함

사용되는 목적 :

→ 효과적인 오프라인 경험, 서버 자산의 업데이트, 푸시 알림과 백그라운드 동기화 api.

작동 방식 :

→ 네트워크 요청 가로채기, 리소스 캐싱

-->> 서비스 워커는 브라우저와 독립적인 스레드에서 실행되며, 네트워크 요청을 가로채고 리소스를 캐싱하여 오프라인 상태나 네트워크가 느린 상태에서도 브라우저에 캐시된 리소스를 제공할 수 있음 

 

 

의문점 :

그러면 만약 아직 캐시가 업데이트 되기 전에 문제가 발생했다면 예전 리소스를 보여주게되는 문제가 있을 텐데.. 이건 어떻게 해결하는거지?

해결 방안 (캐싱전략) :

1. Cache-First, Network-Fallback: 먼저 캐시에서 리소스를 가져오고, 네트워크에서 새 리소스를 가져와 성공하면 캐시를 갱신하는 방식. 이렇게 하면 오프라인 상태에서는 기존 캐시를 사용하면서, 네트워크가 복구되면 최신 리소스로 업데이트할 수 있음
2. Network-First, Cache-Fallback: 네트워크에서 최신 리소스를 먼저 요청하고, 실패할 경우에만 캐시된 리소스를 사용 이렇게 하면 항상 최신 리소스를 유지하려 하지만, 네트워크 상황에 따라 로딩 속도가 느려질 수 있음
3. Stale-While-Revalidate: 캐시된 리소스를 즉시 반환하되, 동시에 네트워크 요청도 병행해서 최신 리소스를 가져옴. 네트워크 응답이 성공하면, 캐시를 업데이트해서 다음 요청 시 최신 리소스를 사용할 수 있게 함.

—> 즉, 서비스 워커가 브라우저의 요청을 가로채고, 어떤 리소스를 캐시에 제공할지, 네트워크에서 가져올지를 결정하는 역할을 함

이는 워커 맥락에서 실행되기 때문에 dom에 접근할 수 없고, 논 블로킹으로써, 자바스크립트와는 다른 스레드에서 동작하여 연산을 가로막지 않는다. 즉, 비동기적으로 설계되었다.

또한, 워커는 보안 상의 이유로 https에서만 동작함. 왜냐하면 중간에 네트워크 요청을 해야하는데, 이 때, 공격 받기 쉽기 때문이다.

Service Worker의 생명 주기:

생명 주기 : 설치 → 활성화 → 사용 → 제거

  -->> 이 과정에서 캐시 업데이트나 구버전 리소스 삭제 등의 작업을 처리할 수 있음

 

서비스 워커의 업데이트: 서비스 워커가 업데이트되는 경우, 새로운 서비스 워커가 활성화되기 전에 이전 워커가 계속 작동하기 때문에, 캐시를 어떻게 갱신할지에 대한 전략이 중요.

참고: https://developer.mozilla.org/ko/docs/Glossary/Thread