브라우저의 렌더링 방식

김철회·2022년 11월 3일
0

우리가 크롬이나 IE에 들어와서 url 검색창에 url을 입력하면 거기에 맞는 웹사이트가 뜬다.
검색을 하고 웹사이트가 뜨는 이 과정을 브라우저가 렌더링 하는 방식이라고 하며 이 과정에는 어떠한 순서가 있는지 알아보고자 한다.

브라우저란?

브라우저부터 알고 가보자. 브라우저는 쉽게 생각해서 크롬, IE, 네이버 웨일, Safari 등을 말한다.
브라우저는 사용자가 요청하는 자원을 서버에 요청하고, 서버로부터 응답 받은 자원을 브라우저에 알맞게 표현해주는 소프트웨어라고 보면 좋다.

렌더링을 담당하는 프로세스와 쓰레드 알아보기.

브라우저의 렌더링 과정 중에 일어나는 일은 렌더러 프로세스에서 Main Thread가 담당한다.

먼저 프로세스와 쓰레드는 뭘까?

쉽게 설명하면, 프로그램은 그 자체만으로 코드 뭉치이고 프로그램이 실행되고 있는 상태를 프로세스라고 한다. 쓰레드는 프로세스 내부에서 더 작은 실행 단위를 말한다.

본격적인 렌더링 과정 알아보기.

Parsing -> Style -> Layout -> Layer -> Paint -> Tiling -> Raster -> Draw Quad

위의 8개의 순서를 거친다. 대부분의 과정이 Main Thread에서 처리가 되지만 그렇지 않은 경우도 있다. Main Thread에서 모든 걸 처리하면 화면 지연이 발생하면서 사용자 경험이 좋지 않게 될 수도 있다.

Main Thread

Parsing
파싱에 대해 들어본적이 있을 것이다. url검색창에 url을 입력하면 서버는 html, css를 응답에 보내준다. 단 이때 작성되어 있는 코드는 그냥 텍스트들이다. 그렇기 때문에 브라우저는 이 텍스트들을 그대로 읽어서 화면에 보여주면 우리 눈에는 텍스트만 쭉 나열되는 것이 보일 것이다.

즉, 텍스트 덩어리들을 우리가 의도한대로 박스면 박스, 버튼이면 버튼처럼 보이기 위한 과정을 파싱이라고 생각하면 좋다.

파싱 단계에서 html 코드들을 html Dom Tree구조로 만들어준다.

Style
우리는 파싱 단계를 거치면서 html Dom tree를 갖게 되었다. 근데 html Dom tree는 일종의 뼈대 역할이다. 글자는 몇px인지 박스의 width는 어떤지를 정해주어야 의도한대로 화면에 나올 것이다.

Style단계에서는 CSS 파일을 읽어 Computed Style을 도출한다. 이 단계에서 %, em, rem등도 모두 px로 계산 된다고 한다.

Layout
현재 알고 있는 것은 html Dom Tree와 Style이다.
뼈대도 알고 있고, 그 뼈대가 갖는 크기, 색상, 글자 크기, 스타일 등을 알고 있다.

Layout 과정에서는 알고 있는 정보들을 어디에 배치할 지를 정한다. 요소에 대한 크기와 색상 등을 모두 알고 있지만 어디에 배치했는지는 모른다. 여기서 Layout Tree를 만든다.

Layer
뼈대, 스타일, 배치까지 알고 있다.
무엇을, 어디에 두는지 알고 있고 있는데, 그럼 뭐부터 그리냐가 이제 문제다. html 코드 순서대로 그리는 것이 아니라 CSS에 z-index와 같은 것들이 있다면 순서가 달라지고 position도 있다면 그 순서가 달라진다.

여기서 Layer Tree가 그려진다.

Paint
Paint에서는 위의 과정을 바탕으로 무엇부터 그릴지 Paint Records를 한다. Layout Tree와 Layer Tree를 바탕으로 페인트 기록을 만들어서 무엇부터 그려 나갈지 정하는 것이다.

Compositor thread와 Raster thread

Tilling
이제 뼈대와 스타일, 배치, 배치순서를 바탕으로 무엇부터 그릴지 알게 되었다.

Compositor thread에서 Tilling이란 과정을 처리하는데, Tilling은 우리가 알고 있는 그 타일이 맞다. 렌더링할 부분들을 타일처럼 쪼개서 부분적으로 하나씩 렌더링 하는 것이다.

굳이 타일처럼 쪼개서 보여주는 이유는 뭘까?

이 다음 과정인 Raster단계는 실제로 우리가 마주하는 비트맵 이미지를 출력해주는 단께이다. 이 단계는 시간이 많이 걸리기 때문에 먼저 볼 수 있는 것들을 쪼개서 보여주려고 하는 것이다.

Raster
Raster 단계에서는 Raster Thread에서 처리된다.
화면을 픽셀로 변환해준다. 타일링을 거치면서 화면에 보여질 부분들을 나눴다.
이때 Compositor thread에서 나눠진 타일마다 Raster thread에 픽셀로 변환해 달라며 타일들을 보내준다.
그리고 Raster thread에서는 Raster 과정을 거친 후 다시 Compositor thread로 넘겨준다.

Draw Quad
Compositor thread가 Raster된 타일들을 받았다. 쪼개져 있는 타일들을 화면에 잘 나타나도록 합성해주는 것이 Draw Quad의 과정이다.

profile
안녕하세요!

0개의 댓글