[CS] 브라우저 렌더링 과정

 

 

우리가 주소창에 www.naver.com을 입력하면 무슨일이 일어날까?

 

네이버 메인화면이 뜬다.

 

끝

여기서 포스팅을 마치겠다.

 

 

 

 

 

 

 

가 아니라

그 흑막을 살펴보면 꽤 복잡하다.

 

주소창에 URL을 입력하고 사용자에게 그 화면이 보여지는 과정을 렌더링이라고 하는데

이런 렌더링과정은 개발자 뿐 아니라 컴퓨터를 사용하는 모든 이들이 한번쯤은

관심 가져봤을법한 내용이다.

 

 

 

렌더링이란?

 

개발자가 작성한 HTML, CSS, JS 문서를 브라우저에서 출력하는 과정이다.

 

 

렌더링 순서

 

1. 요청 응답
2. HTML파싱ㅡDOM생성ㅡCSS파싱ㅡCSSOM생성
3. 자바스크립트 파싱
4. 레이아웃(리플로우)
5. 페인팅

 

 

 

크게 이러한 순서로 나눠볼 수 있을 것 같다.

 

 

자세한 과정을 살펴보기 전에

프로그래밍을 아예 공부해본적이 없는 사람들을 위해

HTML과 CSS에 대해 알아보자

 

아주 간단하게 설명하자면

HTML은 화면을 구성하는 골격, 뼈대이다.

 

  <h1> HTML을 알아보자 </h1>
  <p> 싫으면 말구 </p>

  <input>
  <button>버튼이야</button>
  <hr>

 

HTML은

위와 같은 <h1>태그 <p>태그

<input>태그 등 다양한 마크업언어로 구성되어 있고

모든 웹사이트는 HTML없이 만들어질 수 없기 때문에

HTML은 필연적인 존재이다.

 

 

위 처럼 HTML파일을 작성하면

 

 

이런식으로 브라우저에 렌더링 되는 것이다.

차례대로

<h1>태그 <p>태그 <input>태그 <button>태그 <hr>태그로 구성되어있다.

이러한 태그들은 수 없이 많기 때문에

절대 외울 수 없다.

그 때 그 때 필요한 것들을 찾아 써야하고

 

 

여기에 CSS라는 것을 입혀보자

h1 {
  color: rgb(237, 138, 138);
}

p {
  color: rgb(121, 97, 11)
}

input {
  width:200px;
  height:40px;
}

button {
  padding: 10px;
  background-color: rgb(143, 37, 18);
  border-radius: 10px;
  border:none;
  color:white;
}

hr {
  border:2px solid black;
}

 

각 태그들에

크기나 색상 그리고 굵기 등을 변경해줬다.

 

다음과 같이 바꼈다.

 

CSS를 이용해 html태그를 꾸며줬다

사실 꾸몄다고 하기엔 오히려 이전이 나은 것 같다는 생각이 든다.

 

이렇게 HTML은 화면을 구성하는 뼈대,골격

CSS는 보기좋게 디자인을 입히는 것

 

 

 

1. 요청과 응답 (request and response)

 

그렇다면 우리가 주소창에

https://www.naver.com 을 입력했을 때

 

우리가 이용하는

크롬이나 사파리, 파이어폭스 같은 브라우저들은

해당 주소를 찾아 긴 여정을 떠난다.

물론 인터넷이 연결되어 있어야 한다.

 

 

브라우저가 그 주소를 찾아 해당 주소의 서버에게

HTML파일과 CSS파일과 JS파일 (필요 시 이미지나 폰트파일)등을

맡겨놓은 것처럼 뻔뻔하게 요구한다.

 

 

정확히는 다음과 같은 순서를 거친다.

 

1. 웹 브라우저에 도메인을 입력하면

 

ex) www.naver.com / www.google.com

 

2. DNS에 해당 도메인에 매칭되는 IP 주소를 요청한다.

 

여기서 DNS란

Domain Name System의 약어로서

 

숫자로 구성된 IP주소들을

이해하기 쉽게 영어로 변경해 놓은 방대한 주소록이라고 생각하면 된다.

 

 

3. DNS로부터 받은 IP 주소로 웹 서버에 접속한다.

 

이 단계에서 바로 IP주소에게

html,css,js 파일 등을 요청하는 것이다.

누가? 브라우저가!

 

 

이렇게 요청을 받은 Naver 서버는 브라우저에게 그 파일을 전송하고

브라우저는 렌더링 엔진을 통해

그 파일들을 파싱하고 DOM과 CSSOM을 생성한다

 

파싱 / DOM / CSSOM은 목차 두번째에서 바로 설명하겠다.

 

 

2-1. HTML 파싱, DOM 생성

 

 

응답으로 받아온 HTML문서는 오직 텍스트로만 이뤄져있다.

 

이 텍스트 문서를 브라우저가 이해할 수 있는 '형태'로 바꾸는 작업이 필요하다.

여기서 말하는 형태가 바로 DOM구조이다.

 

DOM (Document Object Model)

이란

문서를 객체로 변환한 모델이다.

 

브라우저는 자바스크립트 언어만 이해하는데

자바스크립트는 HTML의 태그나 속성들을

바로 다룰 수가 없기 때문에

다룰 수 있도록 객체의 형태로 바꿔주어야 한다.

 

그래야 브라우저가 HTML 문서를 이해할 수 있다.

 

이렇게 브라우저가 읽을 수 있게 DOM구조로 변환하는 행위를

파싱이라고 한다.

 

 

2-2. CSS 파싱, CSSOM 생성

 

html을 파싱하다가 <link>,<style>태그 등을 만나면

파싱을 잠시 멈추고 이러한 리소스파일들을 서버로 요청한다.

 

 

이 HTML문서의 빨간색으로 표시된 부분이다.

 

이 태그들은 보통 CSS파일을 가져올 때 사용한다.

 

이렇게 가져온 CSS파일도 HTML과 마찬가지로

DOM을 생성하기 위해 파싱을 해줘야한다.

 

하지만 여기선 DOM이라 칭하지 않고

CSS Object Model

즉 CSSOM이라고 칭한다.

 

CSS문서를 객체 모델로 변환한 것이다.

CSSOM을 생성하고 나면

HTML파일은 다시 본론으로 돌아가

파싱을 멈췄던 부분부터 다시 파싱을 시작해

DOM을 마저 생성한다.

 

DOM과 CSSOM을 생성한다는건

정확히는

DOM트리와 CSSOM트리를 생성한다는 것이다.

 

DOM트리

DOM트리 출처 : ( https://blog.asamaru.net/ )

 

 

 

CSSOM트리

CSSOM트리 출처 : ( https://blog.asamaru.net/ )

 

 

두 트리의 모양은 비슷하지만

두개는 서로 다른 독립적인 트리이다.

 

(HTML은 구조를 CSS는 디자인을 담당하기 때문)

 

렌더링을 하기위해

헬륨과 수소를 억지로 결합해 핵융합을 하는 것처럼

 

둘을 합쳐 렌더트리 를 만든다.

렌더트리 출처 : ( https://blog.asamaru.net/ )

 

 

렌더링은 진짜로 사용자에게 보여주기 위한 화면을 그리는 과정이기 때문에

보이지 않을 요소들은 이 트리에 포함하지 않는다.

 

실제로 우리가 보는 페이지를 만들기 위해서는

'페인팅'이라는 작업을 거쳐야 하는데

이 페인팅작업은 렌더트리의 노드들이 가지고있는 속성들을 바탕으로 이뤄진다.

 

3. Javascript 파싱

 

각 브라우저의 렌더링 엔진은

DOM을 생성하다 style이나 link태그를 만나면 멈춘다고 했는데

<script>태그를 만날때도 파싱을 잠시 멈춘다.

 

그리고 src속성에 적혀있는 파일을 서버에 요청한다.

 

이렇게 받아온 JS파일도 파싱을 해야되는데

이 파싱은 브라우저 렌더링 엔진이 직접하지 않고

 

Javascript엔진인

 

V8에게 제어권을 넘겨주고

JS파싱이 완료되면

다시 브라우저엔진이 제어권을 받아

남은 HTML파싱을 재개한다.

 

JS엔진인 V8은 JS파일의 코드를 파싱해서

컴퓨터가 이해할 수 있는 기계어로 변환하고 실행한다.

 

 

3. 레이아웃

 

렌더트리에는 요소들의 위치나 크기와 관련된 정보들이 있다.

 

하지만 이 정보들은 각 요소들에 대한 정보일 뿐

화면 전체에서 정확히 어디에 위치할 지는 모른다.

이런 계산을 레이아웃(리플로우)단계에서 한다.

 

각 요소들이 전체 화면에서 어디에, 어떤 크기로 배치되어야 할 지 파악하기 위해

렌더트리의 맨 윗부분부터 아래로 내려가며 계산을 하고

모든 크기가

절대단위인 px값으로 변환된다.

 

(width:30% 이렇게 비율로 정해져도 계산은 px값으로 진행)

 

 

4. 페인팅

 

브라우저 화면은 픽셀이라고 하는 아주 작은 점들로 이뤄져 있고

각 정보를 가진 픽셀들이 모여 하나의 이미지와 화면을 구성한다.

 

따라서 화면에 색상을 입히고 보여주기 위해서는

이 픽셀에 대한 정보가 있어야 한다.

 

페인팅은 이러한 픽셀들을 채워나가는 과정이고

따라서 이 과정을 마지막으로 우리는 단순한

텍스트에 불과했던 파일 내용들을 이미지화된 모습으로

브라우저 화면을 통해 볼 수 있다.

 

 

 

 

 

 

 

 

여기까지 기본적인 렌더링 과정인데

 

대충은 아는 것 같았지만

설명을 제대로 못했기 때문에

 

다시 각인시킬 필요가 있다고 생각하여 작성했다.

 

다음 포스팅은

렌더링 과정의 심화버전인

리플로우와 리페인팅에 대해 다뤄보겠다.

 

 

 

 

 

 

 

 

참고자료

https://patrick-f.tistory.com/9

https://boxfoxs.tistory.com/408

https://joooing.tistory.com/entry/rendering