브라우저 렌더링 과정

https://leap-in.com/ja/lets-learn-how-to-browser-works/

위 글을 번역 및 간단하게 재구성 하였음.

• 브라우저 렌더링은 일반적으로 60fps로 이루어진다.
  • 1프레임 = 약 16.6ms
• 자바스크립트나 렌더링 과정에서 시간이 16ms 이상 걸리는 경우 렌더링이 1프레임 안에 완료되지 않으므로 프레임레이트가 저하된다. → 화면이 버벅거리는 것으로 보인다

렌더링의 흐름

• 화면이 최초로 렌더링 될 경우 모든 과정을 실행한다.
• 화면에 갱신이 생기면 필요한 과정만 거치고, 나머지 과정은 생략한다.

Parse

• HTML과 CSS를 해석하여 구조체로 만드는 작업
• HTML → DOM Tree

• CSS → Style Rules(CSSOM Tree)

• 브라우저의 렌더링을 담당하는 기능을 렌더링 엔진(브라우저 엔진)이라고 한다.
  • Safari: Webkit
  • Chrome: blink
  • Firefox: Gecko
  • edge: (구)EdgeHTML

Style

• DOM Tree와 Style Rules를 묶어서 처리하는 과정
• 어떤 스타일이 어떤 요소에 적용되는지 판단하고, 한 요소에 적용되는 스타일이 2개 이상이면 우선순위를 계산한다.
• DOM 구조가 변경되거나 CSS 프로퍼티가 변경되면 호출된다.
• 요소와 스타일의 매칭 정보를 Render Tree라고 하고, Render Tree의 각 노드를 Renderer이라고 부른다.

Layout

• 각 요소의 위치와 크기를 계산하는 과정
• Layout 혹은 Reflow라고 부른다.
• Render Tree의 상위 Rendere부터 하위로 내려가면서 재귀적으로 계산한다.
  • 화면을 갱신하는 경우는 해당 요소와 하위 , 형제 요소만 다시 계산한다.
• Layout Tree가 생성된다.
  • 화면에 표시되는 요소 대상으로만 생성된다.
    • display:none 이 적용된 요소는 미포함
    • visibility: hidden 요소는 포함됨
    • ::before(content: 'Text')등의 가상요소는 포함됨

• Layout 재계산의 종류
  • Global Layout: 페이지 전체에 관련된 레이아웃 변경이 일어났을 경우
    • 브라우저 크기, 전체 폰트사이즈 등
  • Incremental Layout: 변경이 한정적인 경우(요소 추가 등)

Paint

• 크게 두가지 작업이 이루어진다.
  • 레이어 위에 픽셀을 채우는 과정(= 래스터화)
  • 이후 PaintRecords를 생성한다.
  • PaintRecords
    • 겹쳐지는 요소를 올바르게 렌더링하도록 순서가 정해진 명령의 집합
    • Stacking Context에 명령 순서가 정해져있다 .모던 브라우저에서는 Layer Tree를 동시에 생성한다.
    • Layer Tree
      • Layout 전체를 분리하여 Layer단위로 변환한 구조
      • 어떤 레이어에서 변화가 일어났을 경우, 해당 Layer만 변경하여 연산량을 줄인다.
      • transform 혹은 will-change 속성이 있는 경우 레이어가 분리된다.
      • 크롬 개발자도구의 Layer 탭에서 확인할 수 있다.

Composite

• Paint 과정에서 그려진 레이어를 Paint Records에 맞춰 합성하는 과정
  • 어떤 요소가 다른 요소 위에 나타날지가 결정되기 때문에 정확한 순서로 렌더링되어야 한다.
• 합성된 레이어는 Viewport 내의 화면을 우선하고, 이후 스크롤 등으로 요청받은 순으로 GPU에서 처리한다.
• Composite 과정은 main thread를 사용하지 않기 때문에 javascript가 실행되는 동안에도 css 애니메이션을 실행할 수 있다.
  • transform, opacity등은 이 과정에서 적용되므로 성능 저하가 크지 않다.

렌더링과 스레드

Main Thread

• Parse에서 Paint까지의 과정을 담당하는 스레드
• 렌더링 처리와 javascript 실행 처리를 함께 담당하고 있으므로, 부담을 적게 하는 것이 중요하다.

Compositor Thread

• 레이어 합성(composite)를 담당하는 스레드
• Raster Thread에게 래스터화(비트맵화)를 의뢰하고, 래스터화가 완료된 레이어를 합성한다.

Raster Thread

• 총 4개가 존재한다.
• Compositor Thread는 4개 중 비어있는 스레드에 요청을 보낸다.

GPU

• 합성된 레이아웃을 화면에 출력한다.
• transform과 opacity를 사용하는 애니메이션은 레이어가 분리되어있고 래스터화도 완료되어 있으므로 Compositor Thread와 GPU만 처리한다.