브라우저 렌더링 원리

브라우저의 렌더러 프로세스의 핵심 역할은 HTML, CSS, JS를 사용자가 인터렉션할 수 있는 웹페이지로 만드는 것이다.

1. 브라우저 렌더링 - 1. 파싱(Parsing) 단계
2. 브라우저 렌더링 - 2. 스타일 계산(Style) 단계
3. 브라우저 렌더링 - 3. 레이아웃(Layout) 단계
4. 브라우저 렌더링 - 4. 페인트(Paint) 단계
5. 브라우저 렌더링 - 5. 컴포지팅(Compositing) 단계

일련의 과정들이 점진적으로 진행된다는 것을 아는 것이 중요하다.

렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다.

네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것이다.

• 브라우저는 어떻게 동작하는가? (naver.com)

References #

• 모던 웹 브라우저 들여다보기 (파트 3)  |  Web  |  Google Developers
• Gecko Reflow Visualization - mozilla.org - YouTube
• 브라우저는 어떻게 동작하는가? (naver.com)
• 하드웨어 가속에 대한 이해와 적용 (naver.com)
• 웹 브라우저는 렌더링 프로세스 (cresumerjang.github.io)
• 페인트 복잡성 단순화 및 페인트 영역 줄이기  |  Web  |  Google Developers
• 컴포지터(compositor) 전용 속성 고수 및 레이어 수 관리  |  Web  |  Google Developers
• CSS Triggers