크롬 브라우저의 Rendering 작업

Recalculate Style

엘리먼트에 style을 적용하기 위해 계산하는 작업

엘리먼트의 style 객체가 변경될 때 발생함

document.getElementById("box").style.transform = "translate(0px, 0px)";

크롬 브라우저의 Rendering 작업

Layout

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

width, height, left, top, offsetHeight, offsetWidth, scrollTop, 등이 변경될 때 발생함

document.getElementById("box").style.left = "100px";
document.getElementById("box").style.top = "200px";
document.getElementById("box").style.width = "400px";
document.getElementById("box").style.height = "300px";

크롬 브라우저의 Rendering 작업

Update Layer Tree

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

Blink에서 매번 발생.

크롬 브라우저의 Rendering 작업

Paint (Paint Setup, image encode/decode)

Layer에 엘리먼트의 픽셀 정보를 기록하는 작업

• border-radius, shadow-box,등과 같은 속성이 변경되었을 때 발생
• img의 src가 변경되어 이미지가 decode 될때 발생
• Layout 작업이 발생한 경우 발생
• 성능 병목의 주 요인

document.getElementById("box").style.borderRadius = "5px";
document.getElementById("logImg").src = "http://m.naver.com/logo.png";

크롬 브라우저의 Rendering 작업

Composite Layers

Layer를 변형하여 화면에 그리는 작업

• GPU 가속이 적용된 Layer일 경우, GPU가 담당을 한다
• transform, opacity속성이 변경되었을 때 발생
• 매번 발생함

document.getElementById("box").style.transform = "translate(0px, 0px)";
document.getElementById("box").style.transform = "translate3d(0px, 0px, 0px)";
document.getElementById("box").style.opacity = 0;

Layer 생성 조건

• 3D or perspective transform CSS properties
• 'video' elements using accelerated video decoding
• 'canvas' elements with a 3D (WebGL) context or accelerated 2D context
• Elements with CSS animation for their opacity or using an animated webkit transform
• Elements with accelerated CSS filters
• Element has a descendant that has a compositing layer (in other words if the element has a child element that’s in its own layer)
• Element has a sibling with a lower z-index which has a compositing layer (in other words the it’s rendered on top of a composited layer)

가장 간단한 Layer 생성 조건

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

성능 개선 후 (데모)

transform,opacity 이용, Layer 사용

성능 개선 후 예제

애니메이션 이동방식

어떻게 엘리먼트의 속성을 바꿀것인가?

애니메이션 이동은 display:block/inline-block로 지정 후, transform:translate, opacity을 사용한다.

애니메이션 주기 제어 방식

언제 엘리먼트에 변경을 요청할 것인가?

• CSS Transition/Animation은 안정성 문제로,
  android는 4.3이상. iOS는 6.0미만에서 사용
• iOS는 6.0 이상에서 부터는 브라우저 스크롤과 함께 사용시,
  Transition End 이벤트가 발생하지 않는 문제로 CSS Transition 사용 불가

레이어 구성을 위한 하드웨어 가속

하드웨어 가속은 단말기, OS환경에 따라 적용 범위가 달라짐

• Android는 3.0부터 하드웨어 가속이 가능하나,
  안정성 문제로 android 4.0 부터 선별적으로 적용
• Android 4.0은 단말기, OS 환경에 따라 안정성에 문제가 있음
• Android 4.1부터는 안정적으로 지원 가능, iOS는 3.0부터 사용가능