반응형
Streaming에 대해 설명하기에 앞서 Web worker에 대해서 설명 드리겠습니다.
Web worker란?
: Web Worker는 웹 애플리케이션의 기본 실행 스레드와 별도로 백그라운드 스레드에서 스크립트 작업을 실행할 수 있게 도와주는 기능
이러면 메인 스레드와 분리해서 힘든 처리를 별도의 스레드에서 수행할 수 있어 메인 스레드가 차단되거나 느려지지 않고 실행될 수 있다.카카오 테크에서 누구든 알아보기 쉽게 잘 이미지를 만들었는데 아래를 보면 더 이해가 팍! 된다.
javascript는 싱글 스레드 런타임을 갖기때문에 데이터를 처리하는 무거운 동작이 추가된다면 병목현상이 발생하고 렌더링에 영향을 미쳐 사용자 경험을 해친다. 이를 방지하기 위해 사용하는게 web worker다.
예를 들어 어디에 사용하는가?
음... 내가 생각하기에는 Figma가 web worker를 사용했을꺼다. 이유를 크게 3가지이다.
- 복잡한 그래픽 처리 및 계산: Figma는 그래픽 디자인 도구이므로, 복잡한 그래픽 처리와 계산이 필요. 웹 워커를 사용하여 이러한 작업을 백그라운드에서 처리함으로써 메인 스레드의 성능을 유지하고 사용자의 작업 흐름을 방해안함
- 다중 작업 처리: Figma는 동시에 여러 작업을 수행해야 할 수 있다. 웹 워커를 사용하면 각 작업을 별도의 스레드에서 처리하여 효율적으로 관리
- 반응성 및 성능 향상: 웹 워커를 사용하여 메인 스레드에서의 작업을 분산시키면, 사용자 인터랙션에 더 반응적이고 부드러운 사용자 경험을 제공
사용방법
위의 이미지처럼 Main Thread와 Worker는 서로 메세지를 통해 데이터를 주고 받는다
[출처]
https://tech.kakao.com/2021/09/02/web-worker/
브라우저 Web Worker 다루기 with 오피스 문서 텍스트 추출 및 암호해제
안녕하세요. 톡플랫폼개발팀 bishop.cho입니다. 현재 메일클라개발셀에서 프론트엔드 업무 개발을 담당하고 있습니다. 기존에는 자바스크립트로 동작하는 오피스 에디터 및 뷰어 개발을 했던 경
tech.kakao.com
반응형