브라우저 동작 원리 (Browser Rendering)

레이아웃, 페인트, 합성

렌더 트리가 만들어지면 레이아웃(Layout) 단계에서 뷰포트 크기를 기준으로 각 요소의 정확한 위치와 크기를 계산한다. 리플로우(Reflow)라고도 부른다. 다음 페인트(Paint) 단계에서 텍스트, 색상, 테두리, 그림자 같은 시각 정보를 레이어별로 그리는 명령 목록을 만든다. 마지막 합성(Composite) 단계에서는 여러 레이어를 GPU(Graphics Processing Unit)의 도움으로 합쳐 최종 화면을 출력한다. 이 파이프라인은 변경이 생길 때마다 부분적으로 다시 실행되는데, 어느 단계부터 다시 하느냐가 성능을 좌우한다. 요소의 크기나 위치를 바꾸면 레이아웃부터 전부 다시 해야 하고, 색만 바꾸면 페인트부터, transform이나 opacity만 바꾸면 합성만 다시 하면 된다. 애니메이션에 transform과 opacity를 권장하는 이유가 여기에 있다. 또 자바스크립트에서 스타일 변경과 오프셋 읽기를 반복하면 브라우저가 매번 강제로 레이아웃을 계산하는 레이아웃 스래싱(Layout Thrashing)이 발생하므로 읽기와 쓰기를 묶어 처리해야 한다.

자바스크립트 실행 모델

렌더링과 자바스크립트 실행은 기본적으로 같은 메인 스레드를 공유한다. 자바스크립트는 단일 스레드로 동작하며, 오래 걸리는 동기 작업이 실행되는 동안에는 화면 갱신과 사용자 입력 처리가 모두 멈춘다. 비동기 작업은 이벤트 루프(Event Loop)가 관리한다. 타이머나 네트워크 응답의 콜백은 태스크 큐에, 프로미스(Promise)의 후속 처리는 우선순위가 더 높은 마이크로태스크 큐에 들어가며, 콜 스택이 비면 이벤트 루프가 큐에서 작업을 꺼내 실행한다. 브라우저는 보통 초당 60회 화면을 갱신하므로 한 프레임에 쓸 수 있는 시간은 약 16밀리초다. 이 안에 스크립트 실행과 렌더링 파이프라인이 끝나지 않으면 화면이 끊기는 것처럼 보인다. 무거운 연산은 웹 워커(Web Worker)로 분리해 메인 스레드를 비워 두는 것이 해법이다.

면접에서 이렇게 물어본다

• 주소창에 URL을 입력하고 화면이 뜨기까지의 과정을 처음부터 끝까지 설명해 보라.
• DOM, CSSOM, 렌더 트리는 각각 무엇이고 어떤 관계인가.
• 스크립트 태그의 defer와 async의 차이를 파싱 차단 관점에서 설명해 보라.
• 리플로우와 리페인트의 차이, 그리고 애니메이션에 transform을 권장하는 이유를 말해 보라.
• 이벤트 루프에서 태스크 큐와 마이크로태스크 큐의 처리 순서를 설명해 보라.