[웹 렌더링 개념-2] webkit 렌더링 엔진 작업 순서-브라우저에 화면이 그려지는 과정 ✏️

개요

이번 6월에 회사에서 제가 속한 팀을 대상으로 Vue 라이프 사이클에 대한 기술 공유를 제가 맡게 되었었는데요.

단순히, 라이프 사이클에 대한 개념과 사용 방법 공유보다는 라이프 사이클이 어떻게 렌더링으로 작용하는지를 공유하고 싶었습니다.

그 이유는 저와 팀 원들에게 원리와 동작을 충분히 이해하고 프로그래밍을 하자는 메시지를 던지기 위해서였습니다.

공유를 준비하면서 공부한 내용을 총 3개의 시리즈 포스팅으로 작성해봤습니다.

[웹 렌더링 개념-1] DOM 이해하기✏️ 
👉 [웹 렌더링 개념-2] webkit 렌더링 엔진 작업 순서- 브라우저에 화면이 그려지는 과정✏️
[Vue] Vue의 라이프 사이클과 연관 지어 알아보는 렌더링 원리✏️ 

이번 내용은 브라우저의 렌더링 순서와 원리입니다. 신입 개발자 면접으로도 가끔 물어보는 질문이기도 한 브라우저 렌더링 과정을 설명드립니다.

 

그럼 순서대로 브라우저에서 어떤 과정으로 렌더링이 일어나는지 알아보겠습니다.🔥  

- 브라우저에는 렌더링을 담당하는 엔진이 있습니다.

- 브라우저 렌더링 과정

- 정리

- 시리즈 다음 내용 링크

 

 

 

 

🔥 브라우저에는 렌더링을 담당하는 엔진이 있습니다.

렌더링이란, 브라우저가 서버로부터 받은 HTML, CSS, Javascript 코드들을 그래픽으로 그리는 작업을 말합니다.

이 렌더링 작업을 처리하는 엔진이 브라우저의 한 부분인 거죠.

크롬이나 사파리는 전 세계적으로 많은 사용자를 가지고 있는 브라우저입니다. 크롬과 사파리는 webkit이라는 오픈소스 렌더링 엔진을 커스텀해서 개발된 브라우저입니다.

그래서,  대중적이기도 하고. 구글 기술 블로그와 이를 참고한 네이버 기술 블로그의 내용을 이 글을 쓰는 데에 참고했기 때문에, 이 포스팅은  webkit 렌더링 엔진으로 렌더링 과정을 설명합니다. 

 

 

 

 

 

 

🔥 브라우저 렌더링 과정

참고 문서

구글 블로그-1 객체 모델 생성
구글 블로그-2 렌더링 트리 생성, 레이아웃 및 페인트
네이버 기술 블로그 참고- 브라우저는 어떻게 동작하는가?

브라우저에는 코드를 그래픽화 해주는 렌더링 엔진이 있습니다. 오픈소스인 webkit 렌더링 엔진은 크롬과 사파리의 렌더링 엔진으로 사용되고 있습니다. 브라우저가 렌더링을 하는 과정은 결국 브라우저 안에 렌더링 엔진이 일 하는 과정과 같습니다.

아래는 webkit의 렌더링 흐름을 나타냅니다.

네이버 기술 블로그에서 참고했습니다.

 

브라우저 렌더링 순서

1. 브라우저가 서버로 요청한 HTML과 정적 파일을 브라우저로 받아옵니다.

2. 렌더링 엔진이 브라우저가 가져온 HTML과 CSS를 파싱을 합니다.

    '파싱'은 브라우저가 파악하고 빠르게 연산할 수 있는 구조로 파일을 변환한다는 의미입니다.

3. 렌더링 엔진이 파싱 후에는 HTML, CSS 각자를 DOM Tree와 CSSOM Tree로 만듭니다.

4. 렌더링 엔진이 Attachment 후에, Render Tree를 만들게 됩니다. 

webkit에서는 스타일을 결정하고 렌더러를 만드는 과정을 Attachment라고 한다고 합니다. Attachment를 가지고 Render Tree를 구성합니다. Render Tree는 실제로 브라우저에 그려질 요소들로만 구성됩니다. 

 

5. Layout은 Render Tree의 요소들에 입력된 style Rule대로 브라우저의 viewport 내에서 그려질 요소의 크기와 위치 그리고, 배치를 계산합니다. %, vh, vw, em, rem 단위를 px로 변환하는 작업도 Layout 단계에서 합니다.

✏️ viewport는 그래픽이 표시되는 브라우저의 영역을 말합니다.

 

6. Paint

Layout작업까지 끝난 Render Tree는 렌더링 엔진에 의해서 브라우저 화면에 그려집니다. 이 단계가 paint단계입니다.

 

사용자가 요소의 스타일에 영향을 주는 액션이나 이벤트를 발생시키면, Layout과 Paint 작업이 계속 반복 작업되면서 브라우저에 보이게 됩니다.
순수 웹 페이지에서는 스타일 말고, 데이터를 변경시키는 작업을 하거나, 요소가 추가되는 작업이 발생하면, DOM Tree부터 다시 그립니다.
한 페이지에서 값이 변경되는 요소가 많거나 주기적으로 데이터가 변경되는 웹 페이지는 이 렌더링 과정이 계속 발생해서 브라우저에 연산이 많이 발생하게 되고, 
그만큼 사용자가 늦게 웹 페이지를 보게 됩니다.

 

 

 

 

🔥 정리

회사에서 공유 준비를 하면서, '왜 브라우저의 렌더링 원리를 알아야 하는지'를 저 스스로 생각해봤습니다.

사실, 몰라도 웹 페이지를 만들 수 있습니다. 누구나 할 수 있는 일입니다. 그런데, 저는 조금 당위성이 필요했습니다. '왜 이 애플리케이션을 만드는데 이런 기술을 썼는지'를 말하기 위해서는 가장 밑에 있는 웹의 원리부터 이해를 해야한다고 생각했습니다.

그래야 근거가 있게 기술적인 논의가 가능할 거라고 생각했습니다. 그래서 저는 이렇게 공부를 했고, 동료들간에 기술적인 논의를 할 때 이런 이론적인 개념들을 곁들인다면 제 말이 더 근거가 있고 논리적이게 되겠다고 생각했습니다. 또, 이렇게 이해를 하고 보니, 머리 속으로 틀을 잡고 웹을 개발하는 코드를 작성하는 것 같아서 개발을 더 즐겁게 하고 개발에 진심이게 되었습니다.

 

브라우저 렌더링 순서

1. 브라우저가 서버에서 HTML과 CSS를 받아오고
2. 파싱을 해요.
3. DOM 트리가 만들어지고, 두 개의 돔이 합쳐져요. 실제 문서의 DOM이 이 단계에서 만들어지는 거예요.
4. 이 DOM을 가지고, 브라우저 viewport에 요소의 크기 위치 배치가 계산돼요. em, rem, vh, vw 같은 단위가 px로 변경되는 것도 이 과정에서 일어납니다. 이 과정이 Layout이고, 
Layout 작업이 끝나면, Render Tree가 생성됩니다.
5. Render Tree가 페인팅 과정을 거쳐서 브라우저에 보입니다.

 

🔥 다음 내용

👉 [Vue] Vue의 라이프 사이클과 연관 지어 알아보는 렌더링 원리✏️