최근 서비스 개발을 하면서 performance의 점수가
개판나는 것을 보고 렌더링 최적화에 대한 공부를 해야겠다고 느꼈다...
우선 브라우저 렌더링에 대해 깊게 이해가 필요할 것 같아 "브라우저 렌더링"에 대해 공부하며 정리하고자 한다.
나중에 공부해야지 미루지 말고 이참에 깊게 알아보자!
우리는 HTML, CSS, JS를 이용해 웹페이지를 만든다.
우리가 만든 코드를 가지고 웹 브라우저는 웹페이지를 그려주게 된다.
이때 브라우저에서는 어떤 일이 일어날까?
* 이 글에서 설명하는 브라우저는 파이어폭스, 크롬, 사파리와 같은 오픈소스 브라우저이다.
먼저, 브라우저의 공통적인 구조에 대해 알아보자.
웹 브라우저의 구조
뭐가 되게 많다... 당연하다.
하나의 웹페이지를 구성하고 보여주기 위해서는 브라우저가 꽤 많은 일들을 처리해야하기 때문이다.
하나씩 쉽게 풀어보자
🖥️ 사용자 인터페이스(UI)
사용자 인터페이스란 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등... 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
🕹️ 브라우저 엔진(Browser Engine)
브라우저 엔진은 사용자 인터페이스(UI)와 렌더링 엔진 사이의 상호작용 처리를 시각 표현으로 변환시키는 것.
- 브라우저 창, 주소 표시줄, 이전/다음 페이지 이동 버튼 등과 같은 기본 요소 렌더링
- 사용자가 입력한 명령을 받아, 렌더링 엔진에게 해당 페이지를 로드하도록 지시
브라우저 엔진, 렌더링 엔진 등 브라우저를 구성하는 엔진들이 많아 헷갈렸었다.
하지만 ChatGPT의 명확한 설명 덕분에 머릿속에서 정리가 됐다.
🖌️ 렌더링 엔진(Rendering Engine)
렌더링 엔진... 밑에서 자세히 다루기 때문에 간단하게 정의한다.
렌더링 엔진이란 요청한 콘텐츠를 화면에 그리는 역할을 수행한다.
📡 통신(Networking)
HTTP 요청과 같은 네트워크 요청을 수행한다.
🪄 UI 백엔드(UI Backend)
UI 백엔드란 브라우저의 다양한 UI 요소를 처리하고, 렌더링 엔진과 상호작용하여 사용자가 원활하게 웹 페이지를 이용할 수 있도록 지원합니다.
UI 화면에 그려주는거 렌더링 엔진이 하는거 아니야?
라는 생각이 들어 ChatGPT한테 물어봤다 🤖
단번에 이해됐다!
정리하면
- UI Backend의 역할
- 브라우저 창과 같은 UI 구성 요소를 처리
- 사용자의 입력을 처리
- 시스템 자원을 관리
- 미리보는 Rendering Engine의 역할
- HTML, CSS, JavaScript 등의 코드를 분석
- 이를 브라우저 창에 표시하는 데 필요한 레이아웃을 계산
🗂️ 자료 저장소(Data Persistence)
자료 저장소란 사용자의 데이터를 로컬 스토리지(Local Storage)나 쿠키(Cookie)와 같은 데이터 저장소에 저장하여, 다음에 해당 웹 사이트를 방문할 때 이전에 입력한 정보나 상태를 유지하거나 추적할 수 있도록 한다.
Data Persistence는 사용자 경험을 개선하고, 웹 애플리케이션의 효율성을 높이는 데 매우 중요하다.
이 부분도 재밌어서 더 적고 싶은데.. 렌더링 엔진때문에 갈 길이 멀다.
🤖 자바스크립트 해석기(Javascript Interpreter)
자바스크립트 해석기는 자바스크립트 코드를 읽고, 해석하며, 실행하는 역할을 한다.
V8 엔진을 어디서 많이 들어봤을 것이다.
V8 엔진은 구글에서 개발한 자바스크립트 엔진으로, Chrome 브라우저에서 사용되는데 그 엔진이 인터프리터다.
V8 엔진도.. 빠른 속도, 메모리 최적화 등등 깊게 얘기할 것들이 많지만 음에 따로 정리할 예정이다.
드디어 브라우저 기본 구조에 대해 간단히 살펴봤다.
이 중 렌더링 엔진을 중심으로 자세히 알아보자!
웹 브라우저마다 다른 렌더링 엔진
그 전에 웹 브라우저마다 다른 렌더링 엔진을 사용한다.
- Chrome, Opera는 Blink(WebKit 엔진에서 파생된 엔진, Blink 이전에는 Webkit 사용)
- Safari는 Webkit
- Firefox는 Gecko
모든 렌더링엔진이 기본적으로 웹표준을 준수하면서도 엔진마다 조금씩 다르게 동작한다.
* 이 글에서 설명하는 렌더링 엔진은 크롬을 기준으로 설명한다.
렌더링 엔진의 목표
- HTML, CSS, JS, 이미지 등 웹 페이지에 포함된 모든 요소들을 화면에 보여준다.
- 업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료구조를 생성한다.
여기 말하는 업데이트란 사ㅇ자 동작으로 인해서 입력이 발생 하던가, 스크롤이 생겼다던가, 애니메이션이 동작하던가, 비동기 요청으로 인한 데이터로딩 등을 말한다.
렌더링 엔진의 동작 과정
이와 같은 목표를 위해 렌더링 엔진은 Critical Rendering Path라는 과정을 거쳐 동작하게 된다.
Critical Rendering Path에 대해 알아보자.
Critical Rendering Path
🌐 1. Network
- 먼저 브라우저에서 사용자가 요청한 웹페이지에 문서를 불러오고 파싱을 한다.
🌲 2. Dom Tree, CSSOM Tree
- 그 다음 어휘 분석을 통해서 HTML5 표준에 지정된 고유한 토큰으로 변환된다. (위 그림에서 왼쪽에 Start Tag, End Tag 등으로 이루어진 Token)
- 브라우저 렉싱 과정을 통해서 토큰이 해당 속성과 규칙을 정의하는 노드 객체로 변환된다. (위 그림에서 오른쪽)
- 각 노드가 서로 연관성을 가질 수 있도록 트리를 생성하는데 이게 바로 DOM 트리다.
- 최상위에는 document 객체가 들어온다.
- 태그는 element node
- 태그의 요소는 attribute node
- 텍스트의 경우 text node
- 이외에 주석도 comment node가 되어 생성된다.
브라우저는 HTML 문서를 파싱하는 과정에서 자바스크립트나 css 같이 추가로 필요한 파일들을 불러오도록 요청하기도 한다.
- HTML을 DOM Tree로 만드는 과정과 비슷하게 CSS로는 CSSOM Tree가 만들어진다.
- CSS도 트리구조를 가지고 있기 때문에 만약 body 태그에
font-size: 12px;이라는 속성을 정해뒀다면 body의 자식요소들에게도 동일한 속성이 전파되어 적용된다.
- CSS도 트리구조를 가지고 있기 때문에 만약 body 태그에
🎄 3. Render Tree
- 렌더링 엔진이 DOM Tree와 CSSOM Tree를 합쳐서 Render Tree를 만들게 된다.
- 렌더트리란 화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함하고 있는 트리이다.
렌더트리가 만들어지는 과정
- document 객체가 각 노드를 순회하면서 각각의 맞는 CSSOM을 찾아서 규칙을 적용한다.
- 렌더와 관련된 요소를 렌더트리에 포함시킨다.
- 이때, meta 태그나 display:none 속성은 렌더와 관계가 없기 때문에 렌더 트리에 포함되지 않는다.
실제 렌더트리는 위 그림보다 더 복잡하며, 브라우저마다 조금씩 다르게 생성되는 것을 알아두자.
🖼️ 4. Layout
렌더트리가 생성되었다면 레이아웃, 같은 말로 Reflow 과정을 거친다.
- 뷰포트 내에서 요소들의 정확한 위치와 크기를 계산한다.
- 박스 모델에 따라서 텍스트나 요소의 박스가 화면에서 차지하는 영역이나 여백 그리고 이외의 스타일 속성이 계산된다.
- 이때 css에서 %나 em같은 상대적인 단위를 사용했을때는 뷰포트에 맞춰 픽셀단위로 변환된다.
🖌️ 5. Paint
마지막으로 화면에 실제 픽셀로 그려지도록 변환하는 과정을 거치는데 바로 Paint 과정이다.
추가로 자바스크립트가 DOM, CSSOM을 변경하는 경우 리렌더링을 하게 된다. 리렌더링은 다음포스팅에서 다룰 예정이지만 간단히 알아두자.
리플로우: 레이아웃 계산을 다시 하는 것
리페인트: 재결합된 렌더 트리를 기반으로 다시 페인트를 하는 것
웹 브라우저와 렌더링 엔진에 대한 이해를 했다. 다음 포스팅에서는 렌더링 엔진의 파싱과 렌더링 최적화에 대해 정리할 예정이다.
be continue...
