브라우저 렌더링 원리
프론트엔드 개발자라면 필수로 알고 있어야 할 지식 중 하나가 브라우저 렌더링 원리이다. 일단 내가 이해한 대로 간단하게 기록을 해보았다!
📖 HTML 파싱
브라우저가 HTML을 파싱(쉽게 말해서 분석)하여 DOM 트리를 만든다. DOM 트리란 웹 페이지를 이루는 태그를 JavaScript가 이용할 수 있도록 트리구조로 만든 객체 모델을 말한다.
📖 CSS 파싱
마찬가지로 CSS를 파싱하여 CSSOM 트리를 만든다. CSSOM 트리란 DOM처럼 CSS를 구조화한 것이라고 생각하면 된다.
▶️ JavaScript 실행
JavaScript를 실행한다. 이때 HTML 중간에 스크립트가 있다면 HTML 파싱을 중단하게 된다.
🧬 렌더트리 구축
앞서 구축한 DOM 트리와 CSSOM 트리를 조합하여 렌더 트리를 생성한다.
🧮 레이아웃
렌더 트리를 기반으로 화면에 그려질 노드의 위치와 크기 등을 계산한다.
🎨 페인팅
계산한 것을 기반으로 화면에 그려낸다.