브라우저 동작 원리 이해하기 - 기본 구조 / 렌더링 과정 / 최적화 방법

프론트엔드 기술 면접에 100이면 100 등장하는 브라우저 렌더링 설명하기!

자세히 학습해보고 면접 답안으로 활용하기 좋게 요약까지 해보자 📐

 

---

브라우저의 기본 구조

브라우저 렌더링을 이해하기 이전 브라우저의 주요 구성 요소를 아래와 같이 살펴볼 수 있다.

브라우저를 구성하는 다양한 레이어들 간의 관계

 

브라우저는 다음과 같이 여러 단계의 레이어로 구성되어 있다. 각각의 레이어를 확인해보자.

 

• 사용자 인터페이스(UI)
  • 브라우저가 볼 수 있는 거의 모든 것. 요청한 페이지를 보여주는 창 외의 모든 UI를 의미한다.
  • ex. 북마크, 주소창, 뒤로 가기/앞으로 가기, 새로고침, 환경설정 등
• 브라우저 엔진
  • 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어하는 중개자 역할이다.
  • ex. 사용자가 사용자 인터페이스의 새로고침 버튼을 눌렀을 때, 브라우저 엔진이 새로고침 명령을 수행한다.
• 💫 렌더링 엔진
  • HTML, CSS, 그리고 JavaScript를 파싱하고 그 결과물을 바탕으로 페이지를 그려내는 역할을 한다.
  • 각 브라우저는 다양한 렌더링 엔진을 사용한다. 때문에 조금씩은 다르게 동작하는 부분이 존재한다.
    • Chrome, Opera, Edge - Blink
    • Firefox - Gecko
    • Safari - Webkit
• 통신
  • HTTP나 HTTPS 같은 프로토콜을 이용해 외부의 리소스를 얻어오고, 서버에 요청을 보낼 때 사용한다.
• 자바스크립트 해석기
  • JavaScript 코드를 한 줄씩 해석하고 실행하는 역할을 한다.
  • 여기에서 자바스크립트 해석기는 자바스크립트 엔진의 한 부분을 지칭한 것이라고 이해한다. 엔진은 JavaScript를 실행하기 위한 전체 시스템을 의미한다. 가장 유명한 엔진은 Chrome에 탑재된 구글의 V8이다.
• UI 백엔드
  • 브라우저가 동작하고 있는 운영체제의 인터페이스를 따르는 UI들을 처리한다.
  • ex. 브라우저마다 다른 모양으로 그려지는 Alert, Select, Combo box
• 자료 저장소
  • 브라우저 자체에서 하드디스크와 같이 데이터를 로컬에 저장한다.
  • 쿠키나 Local Storage, Session Storage, IndexedDB, 웹 SQL, 파일 시스템 등에 접근하고 데이터를 저장하는 데 사용한다.

 

 

위 레이어들 중 프론트엔드 개발자가 눈여겨봐야 할 레이어가 렌더링 엔진이다.

 

 

 

---

브라우저 렌더링 과정

렌더링 엔진은 위에서 설명한 것과 같이 요청받은 내용을 브라우저 화면에 표시하는 일을 한다.

 

사용자가 어떠한 웹 페이지에 접속하게 되면 

HTML, CSS, 그리고 JavaScript를 파싱하고 그 결과물을 바탕으로 페이지를 그려내는 역할을 한다.

 

 

 

좌) Webkit 동작 과정 - 우) Gecko 동작 과정 [출처] https://d2.naver.com/helloworld/59361

 

 

각 브라우저마다 다른 렌더링 엔진을 갖고 있기 때문에 동작에 약간의 차이는 존재한다.

위에서 보이는 'Webkit의 렌더 트리' - 'Gecko의 형상 트리'와 같은 용어 차이도 그 예시 중 하나이다.

하지만 기본적인 동작 과정은 동일하며 아래처럼 정리할 수 있다.

 

 

브라우저 렌더링 기본 과정

Parsing -> Style -> Layout -> Paint

 

 

Parsing

서버로부터 받은 HTML, CSS를 다운받고 이를 연산과 관리에 유리하도록 Object Model로 만든다.

• HTML → DOM Tree
• CSS → CSSOM Tree

 

 

Style

만들어진 DOM Tree와 CSSOM Tree를 결합하여 Render Tree를 생성한다.

Render Tree는 실제 화면에 그려질 Tree를 말한다.

• DOM Tree + CSSOM Tree = Render Tree

 

+) 실제 화면에 그려질 Tree가 Render Tree라는 점. 이 점은 visibility와 display의 차이와도 연관된다.

•  visibility: hidden  : 보이지는 않으나 요소가 공간을 차지한다. => Render Tree에 포함
•  display: none  : 보이지도, 공간을 차지하지도 않는다. => Render Tree에 제외

 

 

Layout

생성된 Render Tree를 화면에 어떻게 배치해야 할지를 계산한다.

 

노드들이 가지고 있는 스타일과 속성에 따라서 브라우저 화면에 적절한 위치, 크기로 출력될지 계산한다.

만일 크기가 %값이라면, 이 단계에서 % 계산 후 px단위로 변환된다.

 

 

Paint

Layout 계산이 완료된 Render Tree 요소들을 실제 화면에 그린다.

이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다.

 

 

 

 

---

브라우저 렌더링 최적화를 위한 Reflow / Repaint 줄이기

Reflow (Layout)

어떠한 액션이나 이벤트에 따라 레이아웃 수치를 수정하면

레이아웃 과정을 다시 수행하게 되면서 Render Tree와 각 요소들의 크기와 위치를 다시 계산하게 된다.

이 과정을 Reflow라고 정의한다.

 

Repaint (Paint)

Reflow를 수행하고 Render Tree를 다시 화면에 그려주는 과정이 필요하다.

이 과정을 Repaint라고 정의한다.

 

무조건 Reflow가 일어나야 Repaint가 일어나는 것은 아니며

레이아웃에는 영향을 주지 않는 스타일 속성의 변화에는 Reflow를 수행할 필요가 없기 때문에 Repaint만 수행한다.

 

 

Reflow Repaint 줄이기

• 사용하지 않는 노드에는 visiblity: invisible보다 display: none을 사용한다.
• Reflow, Repaint가 발생하는 속성 사용을 피한다.
• 영향을 주는 노드를 줄인다.
• 프레임을 줄인다.

 

 

 

---

참고

웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가 - MDN

브라우저는 어떻게 동작하는가? - Naver D2

프론트엔드 개발자라면 알고 있어야 할 브라우저의 동작 과정 - 요즘IT

면접에서 브라우저 렌더링을 묻는 이유