🎆 브라우저 친구가 어떻게 렌더링을 뚝-딱띠 하는지 알아봅시다.
Rendering?
프론트엔드쪽을 공부하다 보면 허구헌 날 렌더링 이라는 단어를 쓴다.
그 정의는 무엇일까.
쉽게 말하자면, 브라우저에 그림을 그리는 행위이다.
더 정확히는,
Rendering means parsing HTML and displaying the page on the screen (UI).
HTML 파일을 파싱하여, 이를 사용자가 바라보고 있는 화면에 보여주는 행위 이다.
그럼 또 궁금한 점. 누가 이걸해?
Rendering Engine
각 브라우저 (chrome, safari, firefox...) 는 각자만의 렌더링 엔진을 사용합니다.
- firefox:
Gecko - safari:
Webkit - chrome:
Webkit을Blink로 개발하여 사용.
게코, 웹킨, 블링크라는 렌더링 엔진이, rendering를 하는 것이죠.
Rendering 과정
이제 본격적으로 어떤 단계를 거쳐 렌더링이 되는지 알아봅시다.
나름 쉽게 정리해보았으니, 천천히 읽으면 이해가 빠를겁니다.
1. DOM, CSSOM 생성.
-
서버로부터
HTML,CSS을 받아 다운로드합니다. -
다운받은
HTML,CSS는 단순한 텍스트 파일입니다. -
연산과 관리의 효율을 위해 다운 받은 친구들을
object model로 만듭니다.-
HTML로 DOM(Document Object Model) Tree를 만듭니다. -
CSS로 CSSOM(CSS Object Model)를 만듭니다.
-
좌측 그림이 DOM Tree, 우측 그림은 CSSOM 입니다.
2. Render Tree 생성.
-
DOM Tree 와 CSSOM를 이용해
Rendering Tree로 만듭니다. -
Rendering Tree에는 스타일 정보가 설정되어 있으며 실제 화면에 표현되는 노드들로만 구성됩니다.display: none속성은 화면에 어떤 부분도 차지하지 않으므로,Rendering Tree에는 포함되지 않습니다.
3. Layout 계산하기.
-
Rendering Tree의 노드들의 각각 스타일, 속성에 따라 브라우저 내 어디에 위치할 건지 계산합니다. -
모든 노드들이
ViewPort내에서 어느 위치에 있을건지 계산됩니다.-
ViewPort란, 그려지는 브라우저의 크기 / 영역을 말합니다. -
모바일 / PC 모두 브라우저의 크기가 모두 상이하므로, 뷰포트가 달라지면 다시 계산해야합니다.
-
4. Paint 그리기.
계산만하고 끝내면 안되겠죠? 계산된 결과를 토대로 브라우저에 그립니다.
최종적으로,
Rendering Tree 요소들을 실제 화면에 픽셀단위로 변환합니다.
-
스타일이 복잡할수록 페인팅에 걸리는 시간도 늘어납니다.
- 예를 들어, 단색은 페인트하는 데 시간과 작업이 적게 필요한 반면, 그림자 효과는 계산하고 렌더링하는 데 시간과 작업이 더 필요합니다.
렌더링이 어떤 단계를 거치는지 알아보았습니다.
다음 게시물은 이를 최적화 하는 법인 렌더링 최적화에 대해서 다뤄보겠습니다.
.gif)
잘못된 내용이 있다면 댓글로 알려주세요 :)
