Rendering pipeline stage costs

오늘날 대부분의 기기는 초당 60회의 빈도로 화면을 새로 고칩니다. 실행 중인 애니메이션이나 전환이 있거나 사용자가 페이지를 스크롤 중이면, 브라우저가 기기의 새로고침 빈도에 일치하여 각 화면 새로고침에 대해 하나의 새 그림이나 프레임을 제공해야 합니다.

각 프레임에는 16ms 가량의 시간만 할당됩니다(1000ms/60 = 16.66ms). 하지만 실제로 브라우저는 실행 준비를 해야 하므로 10ms 내에 모든 작업을 완료해야 합니다. 이 제한 시간을 충족하지 못하면 프레임 속도가 떨어지고 화면에서 콘텐츠가 떨리게 됩니다. 이러한 현상을 버벅거림 현상이라고 하며 사용자에게 거부감을 줍니다.

 

이러한 현상이 어디서 발생할 수 있는지 알아보고, 어떻게 해결하면 좋을지 이번 시간을 통해 보겠습니다.

브라우저는 CSS 속성 변경 시 계산이 필요하다면 Reflow 및 Repaint이 발생합니다.

효과적인 처리를 위해 Update Layer Tree를 사용하고, 계산된 영역의 정보를 비트맵으로 저장하기 위해 paint가 발생합니다.

 Composite Layer 작업에서 각 레이어를 병합 후, 화면을 출력합니다.

Recalculate Style

• 엘리먼트에 style을 적용하기 위해 계산하는 작업
• 엘리먼트의 style 객체가 변경될 때 발생함

Layout

• 각 엘리먼트의 위치, 크기를 계산하는 작업

Update Layer Tree

• Layout을 위해, Render Tree를 변경하고, paint를 위해 텍스쳐를 예약하는 작업

Paint (Paint Setup, image encode/decode)

• Layer에 엘리먼트의 픽셀 정보를 기록하는 작업
• img의 src가 변경되어 이미지가 decode 될때 발생
• Layout 작업이 발생한 경우 발생
• 성능 병목의 주 요인

Composite Layers

• Layer를 변형하여 화면에 그리는 작업
• GPU 가속이 적용된 Layer일 경우, GPU가 담당을 한다
• transform, opacity속성이 변경되었을 때 발생
• 매번 발생함

레이아웃과 리페인트

DOM이 추가/삭제되거나 요소에 기하학적 영향(높이, 넓이, 위치)을 주는 CSS 내용이 변경될 경우에 렌더 트리가 재구성된다. 즉, 레이아웃부터 합성까지의 과정을 다시 수행하는데 이것을 Reflow(리플로우) 혹은 레이아웃이라고 한다.

* 요소에 기하적인 영향을 주는 CSS 속성 값 변경

CSS 속성 : height, width, left, top, font-size, line-height, padding, margin, border등

레이아웃과 반대로 영향을 주지 않는 CSS 속성 값을 변경하면 레이아웃 과정을 건너뛰고, 페인트부터 수행하며 이를 리페인트라고 한다.

* 요소에 기하적인 영향을 주지 않는 CSS 속성 값 변경

CSS 속성값 : background-color, color, visibility, text-decoration, border-style 등

레이아웃은 전체 픽셀을 다시 계산하기 때문에 부하가 걸리는 반면에, 리페인트는 이미 계산된 픽셀 값을 이용하여 화면을 그리기 때문에 레이아웃에 비해 부하가 적다.

Layer 모델

웹페이지를 랜더링 하기 위해 필요한 이미지 단위 요소

Layer 모델

 

• 레이어들을 배치/합성하여 최종적인 웹페이지를 표현한다.
• 모든 페이지는 root 레이어를 가진다.
• 레이어의 이미지는 텍스처로서 Paint 작업 시, CPU에 의해 Video Memory에 로드된다. 따라서, 레이어 생성 비용이 크고, 추가 Memory가 필요하다.

Layer 생성 조건

1. It's the root object for the page

2. CSS position properties (relative, absolute)

3. Has overflow, an alpha mask or reflection

4. CSS filter

5. CSS 3D Transform, Animation

6. <canvas>, <video>

7. will-change

8. Broswer internal

가장 간단한 Layer 생성 조건

• translateZ(0);
• tranlate3d(0,0,0);

Rendering 성능 개선 전략

• 필연적으로 Recalculate Style, Update Layer Tree, Composite Layer는 꼭! 발생
• Update Layer Tree, Composite Layer의 비용은 Layout과 Paint. 그리고 Layer에 의해 결정된다

=> Layout, Paint를 줄이고, 최적의 Layer를 구성

 

전체 파이프라인 중에서 어디를 수정하는 것인지를 아는 것이 중요하다

• Layout: width, height, font, ...
• Paint: color, background,...
• Composite: opacity, transform

1. layout 속성을 변경한 경우 

Style > Layout > Paint > Composite 

position, padding, overflow, width, top 등

2. paint-only 속성만 변경한 경우

Style > Paint > Composite

shadow, color, background-image, z-index 등

3. compositing-only 속성만 변경한 경우

Style > Composite

transform, orphans, cursor 등이 해당된다.

4. 사용자가 윈도우 크기를 조정한 경우 (원래 있던 flexbox의 item)

Layout > Paint > Composite

Layout, Paint 비용 줄이기

• Layout, paint를 유발하는 속성을 사용하지 않는다.
• 대신, GPU가 처리할 수 있는 변형을 이용하여 같은 효과를 구현한다.
• left/top에 의한 이동은 transform : translate을 이용
• show/hide는 alpha값을 이용하는 opacity를 이용

Layout

• 대략 100개 정도의 DOM Elements가 효율적
• 애니메이션은 transform이나 web animations가 효율적

Paint

• GPU Rasterization기법을 사용하면 대략 10배 정도 빨라짐
• 이 기법을 사용하려면 <meta name="viewport" content="width=device-width"/>를 명시하면
• 웨일, 크롬, 오페라 브라우저들은 콘텐츠를 GPU를 통해 화면을 렌더링 해서 10배 정도 빨라진다.

Composite

• Layer가 많아지면 메모리를 많이 사용하고 더 느려질 수 있음
• 대략 30개 정도의 Layer가 효율적

최적의 Layer 구성하기

대상 DOM 노드가 주변이나 자신에 의해
자주 변경되지 않는 경우 (transform, opacity 제외) 구성

 

• LayerPanel이나, RenderingPanel의 show composite layer border를 통해 확인 후, 불필요한 Layer는 제거한다.
• 사용하지 않는 Layer는 display:none처리

놓친 요소 찾기

크롬 Rendering 탭 활용하기

• show paint rectangles
  paint되는 영역이 녹색으로 표시된다. 

  

• show potential scroll bottlenecks
  touch, mousewheel 과 같이 스크롤에 영향을 미치는 이벤트 핸들러를 표시

애니메이션을 만든다면?

다음 사항을 고려해야 한다

• 애니메이션 이동 방식을 결정
• 애니메이션 제어 방식 결정
• 레이어 구성을 위한 하드웨어 가속 결정

애니메이션 이동 방식

한 프레임 처리가 16ms(60 fps) 내로 완료되어야 렌더링 시 끊기는 현상 없이 자연스러운 렌더링을 만들어낼 수 있다. 자바스크립트 실행 시간은 10ms 이내에 수행되어야 레이아웃, 페인트 등의 과정을 포함했을 때 16ms 이내에 프레임이 완료될 수 있다. 애니메이션을 구현할 때 네이티브 자바스크립트 API를 사용하는 것보다 CSS 사용을 권장한다.

requestAnimationFrame() 사용

requestAnimationFrame API를 사용하면 브라우저의 프레임 속도(보통 60 fps)에 맞추어 애니메이션을 실행할 수 있도록 해준다. 특히 setInterval, setTimeout과 달리 프레임을 시작할 때 호출되기 때문에 일정한 간격으로 애니메이션을 수행할 수 있는 장점이 있다. 또한 현재 페이지가 보이지 않을 때는 콜백 함수가 호출되지 않기 때문에 불필요한 동작을 하지 않는다.

CSS 애니메이션 사용

자바스크립트를 사용한 애니메이션은 성능이 나쁠 수 있다. CSS3 애니메이션을 사용하면 자바스크립트를 실행할 필요가 없고, 브라우저가 애니메이션을 처리하는데 최적화되어 있어서 부드러운 애니메이션을 구현할 수 있다. CSS 애니메이션을 구현할 때는 다음 사항을 지켜서 사용한다.

• position: absolute 처리
  • 애니메이션 영역이 주변 영역에 영향을 주지 않도록 주의해야 한다. position을 absolute나 fixed로 설정하면 주변 레이아웃에 영향을 주지 않는다.
• transform 사용
  • 스타일 속성 중 position, width, height 등과 같이 기하적 변화를 유발하는 속성을 변경하면 레이아웃이 발생한다. transform을 사용한 엘리먼트는 레이어로 분리되기 때문에 영향받는 엘리먼트가 제한되어 레이아웃과 페인트를 줄일 수 있다. 그리고 합성만 발생시키기 때문에 애니메이션에서 사용 시 렌더링 속도가 향상할 수 있다. 때에 따라 하드웨어가 지원될 경우 GPU를 사용할 수 있으므로 성능이 빠르다. 예를 들어 left, top을 사용하면 모든 프레임마다 엘리먼트와 배경이 합성되어 많은 시간이 걸리므로, transform: translate()를 사용해야 한다.

 

출처:

tv.naver.com/v/4578425/list/279844%EF%BB%BF

www.slideshare.net/deview/125-119068291

https://ui.toast.com/fe-guide/ko_PERFORMANCE

https://sculove.github.io/slides/improveBrowserRendering/#/5/4

https://developers.google.com/web/fundamentals/performance/rendering?hl=ko

https://365kim.tistory.com/152?category=443943