브라우저 환경에서의 자바스크립트

1. 단일 스레드 환경

• 브라우저 환경에서 처리되는 자바스크립트는 인터럽트도 불가능한 단일 스레드로 돌아간다

• 따라서, 루프를 돌거나 DOM을 탐색하거나 처리할 때 동시에 한가지 명령만 수행할 수 있다

  스레드 큐

• 단일 스레드 환경에서 지연이 발생하더라도 순서대로 들어온 요청을 처리하기 위한 것

• 스레드 큐는 단일 스레드 환경에서 어떠한 순서로 함수나 기능을 수행할지 결정하는 목록

• FIFO(First-In First-Out)

• 예) setTimeout()함수는 스레드 큐의 영향을 받을 수 있음

• 즉, 현재 실행하고 있는 스레드 큐가 끝나고 나서야, 다음 스레드를 실행한다

2. DOM과 자바스크립트

DOM repaint

• 엘리먼트의 위치말고, 화면에 표시되는 것(스타일링)이 바뀔 때 나타남
• 특정 엘리먼트의 visibility를 수정하거나, 배경색/글자색 등을 바꿀 때 발생
• 특정 DOM 엘리먼트의 visibility를 수정하면 해당 DOM의 자식 DOM까지 하위 트리구조전체를 탐색해야하므로 CPU자원이 소모됨

DOM reflow

3. 웹 워커 (Web Worker)

• 웹 워커를 실행하면, 브라우저에서는 "별도의 스레드"를 띄워서 실행 (UI와 상호작용하지 않는 순수한 자바스크립트 실행할 수 있음)
• 현재 브라우저의 글로벌 컨텍스트인 window와는 별도의 글로벌 컨텍스트를 가짐 (즉, 브라우저 스레드와 완전히 분리된 별도의 스레드로 동작하니깐, 웹워커는 직접 DOM을 변경하거나 접근하지는 못함. 브라우저 스레드와는 별도의 규격을 통해 메시지를 주고받음)

dedicated worker

• worker를 생성한 스크립트에서만 호출/접근 가능

shared worker

• 여러개의 스크립트에서 접근할 수 있음

Reference

• 책/속깊은 JavaScript/양성익/루비페이퍼