들어가며
프론트엔드 개발자라면 반드시 알아야 하는 브라우저 렌저링 과정에 대해서 정리해 보았다! 웹 브라우저는 뼈대를 이루는 HTML, 스타일링을 하는 CSS 그리고 동적인 동작을 수행하는 Javascript가 함께 실행된다. 그렇기 때문에 코드를 의도한 대로 실행시키려면 브라우저의 렌더링 과정을 파악하고 있어야 효율적인 코드를 작성할 수 있다.
브라우저 렌더링 과정
브라우저 렌더링은 HTML, CSS, JavaScript 등의 웹 페이지 자원을 브라우저가 화면에 그리는 과정을 말한다. 하나의 웹 페이지를 보여주기 위해 브라우저는 꽤 많은 일을 처리한다!
브라우저의 기본 구조
1. 사용자 인터페이스
웹 페이지를 제외하고 사용자와 상호작용 하는 사용자 인터페이스. 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등.
2. 브라우저 엔진
유저 인터페이스와 렌더링 엔진의 동작을 제어하고 연결
3. 렌더링 엔진 ㅡ 이번 시간에 다룰 내용!🤓💡
HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시
4. 네트워킹(통신)
각종 네트워크 요청을 수행
5. 자바스크립트 해석기
자바스크립트 코드를 해석하고 실행하는 인터프리터
6. UI 백엔드
체크박스나 버튼과 같은 기본적인 위젯을 그려주는 UI 백엔드
7. 자료 저장소
localStorage나 Cookie와 같이 보조 기억장치에 데이터를 저장
렌더링 엔진의 목표
- HTML, CSS, JS, 이미지 등 웹 페이지에 포함된 모든 요소들을 화면에 보여준다.
- 업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료 구조를 생성한다.
브라우저 렌더링 과정 (Critical Rendering Path)
1. HTML에서 DOM 생성
브라우저 주소창에 url을 입력하고, 엔터키를 치면 브라우저는 서버에 요청을 보낸다. 그리고 서버에서 응답으로 받은 HTML 데이터를 파싱한다. 브라우저는 HTML 마크업을 처리할 때마다 바이트를 문자로 변환하고, 토큰을 식별하고, 토큰을 노드로 변환하고, DOM 트리를 생성한다.
💡 파싱(구문 분석)이란?
파싱은 렌더링 엔진 내에서 매우 중요한 과정이다. 브라우저는 HTML, CSS 등의 텍스트 문서를 이해하지 못한다. 그래서
브라우저가 이해할 수 있는 구조로 변환해주는 과정이 반드시 필요하다. 텍스트 문서를 읽고, 실행하기 위해 텍스트의 문자열을 분해하고 구조를 생성하는 일련의 과정을 말한다.
HTML 태그를 노드로 변환하고, 노드간의 계층 관계를 형성한다. 요소가 렌더링될 때 어떻게 보이는지는 알려주지 않는다. 이는 CSSOM의 책임이다.
💡 HTML을 파싱하다가 CSS링크를 만나면, CSS파일을 요청해서 받아오게 된다. 브라우저는 CSS를 빠르게 다운로드하는 것이 좋다. 그래서
<head>안에 정의하여 빠르게 리소스를 받을 수 있도록 하는 것이다.
HTML 렌더링 중 JavaScript가 실행되면 렌더링이 멈추는 이유?
💡 HTML을 순차적으로 파싱하며 DOM을 생성해 나가다가 JavaScript 파일을 만나면 해당 파싱을 중단하고 script를 읽는다.
<body>의 중간에 위치할 경우 HTML 파싱을 하는 도중 갑자기 JS 파일을 읽게 되므로 오류가 발생할 위험이 있다. 그래서<body>의 최하단에 작성한다. 만약<script>에 defer 속성을 설정하면 HTML 파싱을 중단하지 않고, 브라우저가 페이지 파싱을 모두 끝내면 script가 실행`된다.
2. CSS에서 CSSOM 생성
- HTML과 마찬가지로 수신된 CSS 파일을 브라우저가 이해하고 처리할 수 있는 형식으로 변환한다. CSS 바이트는 문자, 토큰, 노드로 변환되며 마지막으로
'CSS 객체 모델'(CSSOM)이라는 트리 구조가 생성된다. 요소가 화면에 어떻게 보이는지 알려주는 역할을 한다.
3. Render Tree 생성
DOM과 CSSOM를 합쳐서 Render Tree를 생성한다.(Attachment)화면에 나타나는 요소들을 결정하는 트리- 콘텐츠와 계산된 스타일 정보를 모두 포함
- 일부 노드는 표시되지 않는다. (script 태그, meta 태그, display: none)
💡visibility: hidden와 display: none
- visibility: hidden: 요소를 보이지 않게 만들지만 요소는 여전히 레이아웃에서
공간을 차지하기 때문에 렌더 트리에 반영된다.- display: none: 요소가 보이지 않고 레이아웃에 포함되지 않도록 렌더 트리에서 요소를
완전히 삭제즉,렌더 트리에 포함되지 않는다.스크린 리더가 읽지 못하므로접근성을 고려해야 하는 것에 사용해선 안된다!
4. 📐Layout(Reflow)
루트부터 노드를 순회하면서 레이아웃의 위치와 크기를 계산하여 렌더 트리를 배치한다.
5. 🎨 paint(Repaint)
화면에 실제 픽셀로 그리도록 변환하는 과정이다.- 레이아웃 단계에서 계산된 정보들을 바탕으로
화면에 그려주는 과정 - color, border, shadow, img 등 모든 시각적인 작업
- 문서가 클수록, 스타일이 복잡할수록 페인팅에 걸리는 시간도 늘어난다.
6. 🖼️ Composite
위 과정이 모두 끝나면 각 레이어를 합성하고, 브라우저에 화면이 그려진다.
📕 요약
- HTML 문서를 파싱하여 DOM 트리를 생성
- CSS 파일을 파싱하여 CSSOM 트리를 생성
- DOM 트리와 CSSOM을 결합하여 렌더 트리 생성
- 레이아웃 실행
- 브라우저는 렌더 트리를 이용하여 각 요소의 크기와 위치를 계산한다.
- 페인팅 과정
- 요소의 배경, 테두리, 글자 등 화면에 그림을 그린다.
- Composite
📌 참고 사이트
모던 딥 자바스크립트 - 브라우저 동작 원리 (이웅모님)
브라우저는 어떻게 동작하는가? 네이버 D2
객체 모델 생성
렌더링 트리 생성, 레이아웃 및 페인트
브라우저는 어떻게 화면을 렌더링할까? (유튜브)
주소창에 www.google.com을 입력했을 때 일어나는 과정 (블로그)
프론트엔드 개발자라면 알고 있어야 할 브라우저의 동작 과정 (블로그)
