웹 개발자라면, 개발한 웹페이지가 느려서, 고생한 경험이 있을 것이다. 때로는 클라이언트로서 느린 웹서비스에 불만을 가진 적도 있을 것이다. 이를 기술적으로 해결하는 방법 중 하나가, “렌더링 최적화”이다. 거창한 것이 아니고, 브라우저가 컨텐츠를 화면에 그릴 때(렌더링), 성능을 저하시키는 요소들을 개선하는 것이다. 따라서, ”렌더링 최적화”를 이해하기 위해서는, “브라우저의 렌더링 과정”에 대해서 먼저 알아야 한다.

브라우저에 대해서

1. 브라우저의 역할

사용자가 선택한 자원(URL)을 서버에 요청하고 받아 화면에서 표시한다. 조금 더 풀어서 이야기하면, 주소창에 주소를 입력한 후, 엔터를 치면 브라우저가 해당 주소로 요청을 보낸다. 이때, 요청을 받은 곳, 즉, 서버에서 응답을 보내준다. 브라우저는 요청에 대한 결과(응답)를 화면에 그린다.

참고 내용

• 더 자세한 설명이 필요하다면, “이고잉님의 서버와 클라이언트” 바로보기를 추천한다.
• 브라우저가 HTML을 해석하고 화면에 나타내는 방법은 표준을 따른다. 때로는, 같은 소스코드지만 브라우저마다 다른 결과를 볼 수 있는데, 브라우저에 따라 지원하는 스펙이 달라서 일어나는 현상이다.(Can I Use에서 확인 가능)

2. 브라우저의 구조

• UI : 주소창, 즐겨찾기 등 사용자가 조작 가능한 영역
• 브라우저 엔진 : UI와 렌더링 엔진 동작 제어
• 렌더링 엔진 : 요청한 결과(응답)를 화면에 표시
• 네트워킹 : HTTP 요청과 같은 네트워크 호출을 위해서 필요한 부분.
• UI 백엔드 : OS 사용자 인터페이스 방법을 활용하여, 기본적인 위젯(콤보 박스등)을 그림
• JS 엔진/인터프리터 : 자바스크립트를 해석하고 실행
• 데이터 저장소 : Local Storage, Indexed DB, 쿠키 등 브라우저 메모리를 활용하여 저장하는 영역

3. 주요 브라우저의 종류와 렌더링 엔진

참고 내용

• Blink 개발은 구글이 Webkit을 포크하고, 제갈길을 가면서 시작되었다.
• Google going its own way, forking WebKit rendering engine

브라우저의 렌더링 과정

1. 브라우저의 렌더링 엔진 - critical rendering path

앞에서 살펴본 바와 같이, 브라우저의 렌더링 엔진은 서버로부터 받은 내용을 브라우저에 표시하는 역할을 한다.
다시 말해서, 서버로부터 받은 내용(HTML, CSS, Javascript ..등의 파일)을 변환해서 화면에 픽셀 단위로 나타내는 과정이다.

1. DOM(Document Object Model) 생성
2. CSSOM(CSS Object Model) 생성
3. Render Tree(DOM + CSSOM) 생성
4. Render Tree 배치
5. Render Tree 그리기

위와 같이 다섯 단계를 거친다. 2번 CSSOM 생성 과정을 따로 분리하지 않고, 네 단계로 표현하기도 한다.

2. 렌더링 엔진 flow chart

Webkit과 Gecko 엔진에서는 이 과정을 각각 어떻게 처리하는 지 알아보겠다.

Webkit 엔진에서 …

1. DOM(Document Object Model) 생성

   • 다음 네 단계를 거쳐서, 트리 구조 모양의 DOM이 생성된다.

     1. Conversion(변환) : HTML의 raw bytes(원시 바이트)형태로 서버에서 받아온다. 해당 파일의 인코딩(예:UTF-8)에 따라 문자로 변환한다.
     2. Tokenizing(토큰화) : 브라우저가 변환된 문자열을 HTML5 표준에 따라 고유 토큰으로 변환한다.
     3. Lexing(렉싱) : 이 토큰들은 다시 각각의 특성과 규칙을 정의한 object(객체) “노드”로 변환된다.
     4. DOM 생성 : HTML 마크업이 여러 태그 간의 관계를 나타내기 때문에 DOM은 트리 구조를 가진다. 따라서, DOM에 포함된 노드 또한 서로 관계를 가지게 된다. 다시 말해서, 노드의 상대적인 관계를 이용하면, 하나의 노드를 기준으로 모든 노드에 접근할 수 있다. codepen참고

   • DOM 트리는 문서 마크업의 속성과 관계를 포함하지만, 렌더링될 때 표시되는 모습에 대해서는 CSSOM이 관여한다.

2. CSSOM(CSS Object Model) 생성

   • 1.에서 DOM을 생성할 때 거쳤던 과정을 그대로 CSS에 반복한다. 그 결과로 브라우저가 이해하고 처리할 수 있는 형식(Style Rules)으로 변환된다.

   • CSSOM 역시 트리 구조를 가지는데, 그 이유는, ‘하향식’으로 규칙을 적용하기 때문이다. 루트(body)부터 시작해서, 트리를 만들어 가는 방식이다. 모든 요소의 최종 스타일을 확정할 때 브라우저는 해당 노드에 적용 가능한 가장 일반적인 규칙으로 시작한 후에 더욱 구체적인 규칙을 적용한다.

3. Render Tree(DOM + CSSOM) 생성 - Attachment

   • DOM 트리의 루트(html)에서 시작해서, 페이지에 표시되는 각각의 노드에 일치하는 CSSOM 규칙을 찾아 붙인다.

   • 이때, 렌더링 트리에는 페이지를 렌더링하는 데 필요한 가시적인 노드만 포함된다. 따라서, 메타 태그나 스크립트 태그 같은 노드나 display : none 으로 스타일이 지정된 노드는 제외된다. 그러나, visibility : hidden 스타일이 적용된 노드는 보이지는 않지만 공간을 차지하므로, 렌더링 트리에 포함된다.

   • 이 렌더링 트리가 화면에서 최종적으로 그리는 내용이 된다.

4. Render Tree 배치 - Layout

   • 지금까지의 과정을 요약하면, 브라우저가 화면에 표시할 노드와 해당 노드의 스타일을 계산하면서, 하나의 그룹으로 묶어서 렌더링 트리를 만든 것이다.

   • 레이아웃은 브라우저가 화면에 그리기 전에, 이 노드들을 정확한 위치와 크기로 나타내기 위해서 계산하는 과정이다. 이때, 모든 상대적인 값(예:%단위)은 절대적인 값(예:px단위)로 변환된다.

5. Render Tree 그리기 - Painting

   • 렌더링 트리의 각 노드를 화면의 픽셀로 나타내는 작업이다.

Gecko 엔진에서 …

언뜻 보면, 바로 전에 살펴본 Webkit 엔진 플로우 차트와 다른 점이 보인다. 그렇지만 자세히 살펴보면, 그 흐름은 비슷하다는 것을 알 수 있다.

포스팅 예고

오늘 정리한 내용(브라우저 렌더링 과정)을 바탕으로, “렌더링 최적화 방법”에 대해서 쓰겠다.

• 브라우저의 렌더링 엔진 - Deep Dive
• 브라우저의 성능을 저하시키는 방해 요소
• 문제 해결 방법 : 최적화

참고 자료

• 패스트캠퍼스 강의 : 장기효님의 “Vue로 구현하는 PWA 캠프”
• How Browsers Work
• 구글 Web Fundamentals : Critical Rendering Path
• Naver D2 : 브라우저는 어떻게 동작하는가?