브라우저 렌더링에서 메인 쓰레드 역할

들어가기 전

해당 포스트는 브라우저 렌더링 과정 중 네트워크 리소스 로딩은 생략하고, 서술되었습니다. (궁금한 분은 MDN 참고)

웹개발을 처음 배울 당시 html, css, js 3대장을 알게되고 '이렇게 마크업을하고 DOM API를 조작하는군' 하고 바로 프레임워크 학습으로 넘어간 기억이 난다. 이제는 React VirtualDom 목적, 웹 성능 최적화 방법이 궁금해졌고 그 전에 '브라우저 렌더링'을 점검할 필요성을 느껴 이 글을 작성했다.

 

자바스크립트는 싱글 스레드, 브라우저는?

브라우저 렌더링하는데 필요한 스레드와 각 역할을 짚고갈 필요가 있다. 우선 자바스크립트가 싱글스레드라는 것은 자바스크립트 엔진이 단일 Call Stack을 가졌다는 의미이고, 비동기 처리가 가능한 이유는 런타임 환경에서 Web API, Task Queue 등에 역할을 위임했기 때문이다. (간혹 글을 읽다보면, '이벤트 루프가 하나이기 때문에 단일 스레드 기반 언어다' 라는 설명도 있는데 이보다는 단일 Call Stack을 갖고 있기 때문이 더 적합한 말인 것 같다) [더보기]

 

그럼 브라우저는 어떻게 구성되어있을까? 정답은 '브라우저마다 다르다' 이다. 왼쪽처럼 하나의 프로세스에 멀티 스레드 구조를, 오른쪽처럼 멀티 프로세스 구조를 취할 수도 있다.

https://d2.naver.com/helloworld/2922312

 

크롬 한정해서 살펴보면, 사이트마다 (탭이라 칭하지 않은 이유는 iframe 사이트 포함해서) 프로세스를 할당하고 있고

 

(좌) 기능별 프로세스 / (우)한 사이트 내에 여러 Renderer Process 존재할 수 있음

실행중인 프로세스 확인 방법 : 오른쪽 위 [Chrome 맞춤설정 및 제어] > [도구 더보기] > [작업 관리자]

 

 

이 중 우리는 Renderer Process의 메인 스레드에 집중해보자.

https://developer.chrome.com/blog/inside-browser-part3?hl=ko

 

[Rendering Pipeline] https://bit.ly/how-blink-works

 

 

Renderer Process의 핵심 작업은 HTML, CSS, JavaScript를 사용자가 상호작용할 수 있는 웹페이지로 변환하는 것이다. 그 내부에는 여러 쓰레드가 역할을 분담하고 있지만 특히 메인 쓰레드가 대부분의 기능을 도맡고 있다. [참고]

• 사용자 이벤트 처리
• 가비지 컬렉션
• Layout, Paint (Reflow, Repaint)

쉽게 말하자면, 주요 브라우저 렌더링 과정(CRP)과 JS 연산이 모두 '한 곳에서 처리'되고 있다. 여기서 우리는 웹성능 최적화에 대한 힌트를 얻을 수 있다. [참고]

 

'메인 쓰레드 연산을 줄이자'

그렇다면 아래 최적화 방법들이 조금은 와닿게 될 것 이다.

• web worker API를 사용하는 이유
• script 태그에 defer, async를 넣는 이유
• 엘리먼트 위치 이동 시 position 속성보다, transform 을 사용하는 이유
• GPU 가속을 타기 위해 layer를 분리하는 이유
• React VirtualDom Batch Update 장단점

 

우선 그동안 주워듣거나 실무에서 체득한 최적화 기법들이 하나의 이유로 귀결된다는 사실을 공유하고 싶었다. 연산 부하는 곧 메인 쓰레드 연산 부하를 일컫는 것이었고, 사실 나열하는 것보다 실제로 어떤 과정을 최소화했는지 하나하나 짚으면 좋았겠지만 이는 실습과 함께 자료를 준비해보려한다.

 

끝으로 MDN에서 정의한 렌더링 최적화 목표를 공유하며 마친다.

 

CRP를 이해하고, 최적화하는 것은
사용자 상호작용을 보장하며 버벅거림을 피할 수 있도록 하고,
60fps에 리플로우와 리페인트가 발생할 수 있도록 하는데 중요하다.

 

 

참고글

• https://bit.ly/how-blink-works
• https://bit.ly/lifeofapixel
• https://coyo-hm.github.io/post/browser-rendering
• https://so-so.dev/web/browser-rendering-process/
• https://developer.chrome.com/blog/inside-browser-part3
• https://www.youtube.com/watch?v=G4eQziVzCTE
• https://ko.javascript.info/event-loop - queueMacrotask, setTimeout
• https://velog.io/@adultlee/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EA%B0%80-%EA%B7%B8%EB%A6%AC%EB%8A%94-%EB%B2%95 - 브라우저 스레드 종류
• https://ssocoit.tistory.com/269
• https://d2.naver.com/helloworld/2922312 - 탭간 프로세스 / 스레드 정리 필요
• https://developer.mozilla.org/ko/docs/Glossary/Main_thread
• https://1-blue.github.io/posts/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84/ - 태스크와 렌더링 순서
• https://medium.com/myrealtrip-product/fe-website-perf-part2-e0c7462ef822
• 모던 자바스크립트 Deep Dive

 

추가로 궁금한 것

• 인라인 style, file 차이점
• document.cookie는 뭐지
• 가상 요소 선택자
• GPU layer, composition 관계
• paint 과정이란?