[WEB] 브라우저 렌더링 과정 - (2)

CS 공부를 하다보면 주소창에 google.com 을 입력했을 때 일어나는 일에 대해 생각해보게 됩니다.
웹에서 가장 기본적인 부분이지만 비전공자에게는 익숙치 않은 부분이라 쉽지 않았습니다.

이 때 받아온 HTML 파일은 어떻게 브라우저에 렌더링 되는지 정확하게 이해하려고 정리해보려 합니다.

앞의 브라우저 렌더링 과정 - (1) 편과 이어집니다.

2. 브라우저 렌더링

2.5 Layout

Render Tree의 노드들에 대한 위치와 크기를 계산하는 단계입니다.

페이지 상에 존재하는 객체의 크기를 렌더링 트리의 루트부터 시작하여
모든 객체의 정확한 위치와 크기를 계산합니다.

2.6 Paint

계산된 값들을 기반으로 화면에 필요한 요소들을
실제로 그리는 작업을 실행합니다.

레이아웃 단계에서 계산된 모든 위치, 크기를 실제 픽셀로 변환하여 화면에 출력합니다.

2.7 Reflow & Repaint

• 특정 액션과 이벤트에 따라 html의 요소의 크기나 위치의 크기를 변경해야 하는 경우가 발생하며
  해당 과정을 reflow라고 합니다.

• 해당 과정이 발생하면 렌더링 트리와 각 요소들의 크기와 위치를 다시 계산해야 합니다.

• reflow에 따라 다시 페인팅을 해줘야하는 repaint 단계 역시 수행됩니다.

• 하지만, reflow가 발생해야 repaint가 발생하는 것이 아닌 레이아웃에는 영향을 주지 않지만,
  다시 페인팅을 해야하는 background-color, visibility와 같은 스타일을 변경할 때는 독단적으로 수행됩니다.

2.8 Composition

레아아웃과 페인트를 수행하지 않고 레이어의 합성만 실행시키는 단계입니다.

Transform, opacity와 같은 요소들을 의미합니다.

3. 렌더링 최적화

frames per second, 현재 대부분의 기기는 60fps.
이에 대응하려면 앞의 브라우저 렌더링의 모든 과정을 1000/60=16.6666...
즉, 16.6ms 안에 프로세스를 모두 수행해야 한다.

• Reflow 와 Repaint 를 발생시키지 않는 것이 중요한데
  둘 중에서도 Reflow 를 최대한 발생시키지 않는 것이 렌더링 비용이 절약됩니다.

Reflow가 일어나는 대표적 속성

position, width, height, left, top, right, bottom, margin, padding, border, border-width, clear, display, float, font-family, font-size, font-weight, line-height, min-height, overflow, text-align, vertical-align, white-space, ....

Repaint가 일어나는 대표적 속성

background, background-image, background-position, background-repeat, background-size, border-radius, border-style, box-shadow, color, line-style, outline, outline-color, outline-style, outline-width, text-decoration, visibility, ....

마무리하며

Layout, Paint을 최소화 시키고 대체할 수 있다면 Composite으로 대체하자!
이것이 렌더링 최적화 기법의 핵심이라고 할 수 있습니다.