본문 바로가기

Develop/Frontend 가이드

[FE] 브라우저 렌더링 Browser rendering - 0단계 소개

반응형

브라우저 렌더링
https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y

브라우저 렌더링 Browser rendering

Rendering (렌더링) 은 여러 데이터를 모아 시각적인 이미지로 만드는 과정입니다. 브라우저는 HTML 과 CSS 같은 데이터를 '렌더링' 해서 픽셀로 구성된 화면을 완성합니다. 이를 브라우저 렌더링 (Browser rendering) 이라고 합니다. 이때 렌더링을 위한 데이터인 HTML / CSS / JavaScript / Media 등 일체를 통틀어서 'content (콘텐츠)' 라고 부릅니다.

브라우저는 'content (콘텐츠)' 를 'rendering (렌더링)' 해서 'pixel image(픽셀 이미지)' 즉 화면을 만듭니다.

웹 프론트 엔드 개발을 크게 보면 '브라우저로 원하는 화면이 렌더링될 수 있도록 콘텐츠를 구성하는 작업'이라 할 수 있습니다.

브라우저에게 '렌더링'이라는 과정은 사용자에게 보여줄 결과를 만드는 핵심적인 과정이며 브라우저를 구성하는 많은 모듈들이 이 '렌더링' 이라는 과정을 보조하기 위해 존재합니다. 이렇게 브라우저의 핵심 기능 중 하나인 렌더링을 담당하는 모듈을 렌더링 엔진 이라고 하며 Chromium 의 렌더링 엔진은 Blink 입니다. 구체적으로 브라우저가 어떻게 렌더링하는지 알 수 있도록 크롬 브라우저의 렌더링 엔진인 'Blink' 를 기준으로 설명하도록 하겠습니다.

렌더링 파이프라인 Rendering pipeline

Blink 렌더링 파이프라인
Blink 렌더링 파이프라인

위 그림은 렌더링 파이프라인 (Rendering pipeline) 을 표현한 그림으로, 렌더링 과정이 어떻게 진행되는지 작업 단계 별로 볼 수 있습니다. 다시 말해 브라우저가 콘텐츠를 어떻게 픽셀로 바꾸는지를 이해하려면 렌더링 파이프라인에 등장하는 각 단계가 어떻게 동작하는지를 이해하고 전체적으로 어떤 흐름으로 진행되는지를 파악해야 합니다.

렌더링 파이프라인도 하나의 모듈이기 때문에 입력과 출력이 정해져 있습니다. 렌더링 파이프라인으로 입력되는 건 'Contents (콘텐츠)' 이고, 렌더링 파이프라인에서 출력되는 건 'Raster image (레스터 이미지)' 입니다. 레스터 이미지는 레스터 방식으로 만든 이미지인데 이 글에서 모든 내용을 설명할 순 없습니다. 자세한 내용은 다른 글을 참고해주시길 바랍니다. 단순하게 '레스터 이미지는 비트맵 이미지다.' 라고 이해하시고 글을 읽으셔도 됩니다.

작성하다 보니 너무 길어져서 각 렌더링 단계마다 하나의 글로 작성했으니 참고하여 주시길 바랍니다.

  1. 브라우저 렌더링 Browser rendering
  2. 브라우저 렌더링 Browser rendering - 1단계 파싱 'parse'
  3. 브라우저 렌더링 Browser rendering - 2단계 스타일링 'style'
  4. 브라우저 렌더링 Browser rendering - 3단계 레이아웃 'layout'
  5. 브라우저 렌더링 Browser rendering - 4단계 페인팅 'paint'
  6. 브라우저 렌더링 Browser rendering - 5단계 변경 'change'

렌더링 파이프라인은 각 단계를 순서대로 진행하지 않는다.

설명할 때는 마치 콘텐츠가 입력될 때마다 순서대로 각 단계를 진행하는 것처럼 설명했지만, 실제로 그렇게 동작하지는 않습니다. 왜냐하면 콘텐츠는 지속적으로 변화하는데, 매 변화마다 렌더링 파이프라인의 모든 단계를 반복하면 성능이 떨어지기 때문입니다. 실제로 렌더링 파이프라인은 앞 단계에서 조금이라도 끝난 연산을 바로 다음 단계로 넘기거나 단계를 건너뛰거나 하는 최적화가 적용되어 있습니다. 어떻게 최적화되는지는 렌더링 엔진 별로 다르기도 하고 너무 자세한 내용이라 저도 잘은 모릅니다.

렌더링 업데이트
렌더링 업데이트

또 처음 페이지를 로드할 때만 모든 내용을 한번에 렌더링하고 다음부터는 변화되는 부분만 업데이트하는 방식으로 동작해서 성능을 최대한 끌어 올릴 수 있도록 설계되어 있습니다.

참고

Life of a pixel (Chrome University 2019)
Life of a pixel
How Blink works

반응형