[WEB] 쉽게 알아보는 웹 브라우저 렌더링

---

이 게시글은 https://d2.naver.com/helloworld/59361를 읽다가 지친 글쓴이가 쉽게 설명해줍니다.

2편 css transform, positioning 효율성 차이 에서 이어질 예정입니다

 

---

프론트엔드 개발자라면 면접에서 필수 질문들이 몇가지 있다.

예를 들면, 자바스크립트 이벤트 버블링, 캡쳐링 이라던지, 프로미스라던지, 왜 비전공자면서 개발하고 싶었냐 같은 것들이 있다.

그 중에서도 첫번째 질문의 단골은 웹 브라우저 렌더링 과정에 대해 설명하라는 말이다.

 

그래서 잘 아는가?

어느정도까지 설명해야 하는가?

리퀘스트 리스폰스를 받아요~ 라고 끝내버리면 안되는것인가? 

 

깊이 설명한다면 미친듯이 깊이 설명할 수 있는 주제이니만큼,

최대한 간단하고 필수적인 요소들만 간단히 설명해보고자 한다.

---

1. 과정 그래프

 

우선 우리는 모르는 것이 있으면 구글을 본능적으로 찾게 된다.

구글에 'browser rendering process' 를 검색해보자.

그러면 이미지들이 쭉 나오는데, 아래의 이미지를 한번 보자.

 

벌써 창을 닫으려 준비중인가? 이건 앞으로 설명 할 글을 읽으면 자연스레 이해 될 그래프이다.

---

2. 기본적인 렌더링 과정

 

우리가 naver.com을 검색하는 과정을 생각해보자.

일단 uri에 naver.com을 검색 할 것이다.

 

그러면, 'naver.com'을 들어갔을 때 보여질 상상할 페이지들이 그려져 있는 html 파일을 서버에 요청(request)한다.

서버는 요청(request)을 받고 자기가 갖고 있는 파일을 찾아 응답(response)한다.

 

이를 받으면, 사실 html 파일은 우리가 읽을 수 있지만 브라우저는 이해하지 못한다. 그렇기 때문에, 파일을 받으면 DOM 트리를 그린다. 절차적으로 파일을 읽기 때문에(위에서 아래로) 기본적인 html 파일 구조를 생각해본다면 html 태그를 먼저 읽을 것이다.

https://ko.javascript.info/dom-nodes

쉽게 보면 위와 같다.

 

계속 아래로 쭉 내려가면 head 태그 안에 링크 된 css파일을 만날 것 이다. 

css 파일을 읽는 것은 또 다른 CSSOM 트리라는 것을 만든다.

그리고 자바스크립트를 만나면 자바스크립트는 따로 자바스크립트 엔진이 파싱한다.

 

결국 제일 큰 오브젝트인 window의 구성요소는 DOM과 CSSOM과 자바스크립트 라고 할 수 있겠다.

window가 제일 큰 오브젝트 인 이유는, 자바스크립트 함수들이 window.document 식으로 호출하는 것을 생각해보면 알 수 있다(document.getElementby ~ 라고 하는건 window가 국룰이기 때문에 생략 가능해서 그런것).

 

아무튼, DOM 트리로 만들어진 모든 태그들의 관계도와 CSSOM의 관계도를 합친다.

무슨 뜻 이냐면, CSSOM은 모든 DOM이 어떻게 그려져야 하는지에 대한 규칙들이 있다.

예를 들면, 'DOM. 네가 그린 h1태그, 그거 내가 display: none 시켰으니까 나중에 빠지게 될거야~' 라는 식이다.

이걸 Cascading rule이라고 하는데, 어디서 많이 들어본 것 같지 않은가?

CSS는 Cascading Style Sheet의 약자이다!

 

https://www.homeandlearn.co.uk/WD/wds3p2.html

위의 웹사이트에 목적이 잘 설명 돼 있다.

 

그래서 CSSOM을 또 참고하여 최종적으로 우리에게는 Render Tree 가 보여지게 된다.

렌더 트리는 즉, 우리가 직접적으로 보는 트리이기 때문에 보이는 것 만 그려지게 된다. 

---

3. 다시 그림을 보자.

 

신기하게도 이제 우리는 이해할 수 있다.

 

위의 표를 설명해보자면,

 

보라색 삼각형 DOM에서 DOM Tree를 만든다. 이 DOM Tree는 HTML을 HTML Parser를 통해 이해할 수 있게 파싱하여 만드는 것 이다.

아래의 Style Sheets는 CSS Parser를 이용해서 Style Rules를 파싱한다. 

이렇게 만들어진 DOM과 CSSOM을 Attachment 하여 Render Tree를 만든다.

이를 Painting 하여 최종적으로 Display하면 우리가 보이는 웹의 UI가 나오는 것 이다.

---

이 글의 목적은 웹 브라우저 렌더링을 가볍지만 순서에 대한 이해를 돕기 위한, 더 깊은 이해를 돕기 위해 쓰여진 글이다.

어디까지 얼마나 알아야 하는지 헤매는 사람들에게 도움이 되길 바라며...

물론 내가 더 잘 이해하려고 쓴거기도 함

틀린 지식은 언제든 댓글로~

---

참고:

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=ko