[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 렌더링 파이프라인

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

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

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

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

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

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

렌더링 업데이트

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

참고

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