브라우저 성능 최적화

앞 글에서 웹 최적화를 위해 reflow와 repaint에 대한 정리를 하면서  paint과정 외에도 composite라는 과정이 더 있는 점을 알게 되었다.  composite는 브라우저가  각각의 레이어를 스타일 방식에 따라서 병렬적으로 레이어로 분류되고 paint을 한 후에 모든 레이어를 합치는 과정이다.  애니메이션을 처리하기 위해서 GPU도 사용하게 된다.  GPU에서 애니메이션을 처리하므로 메인 스레드는 렌더링 레이아웃에 포커스를 둘 수 있게 된다.

 

* 브라우저가 별도의 Layer 생성할 때 조건 * 

- video, canvas 태그 사용

- animation 이나 transition 사용

- will-change가 opacity, left, top, bottom, right, transform

- iFrame일 경우

- flash와 같은 일부 플러그인

- backfade-visibility가 hidden인 경우

 

 

순서로 보자면

1. Recalculate style 

2. Layout

3. Paint

4. Composite Layers : CPU가 애니메이션을 처리하기 위해서 GPU와 통신하는 단계로 각 레이어를 GPU메모리에 bitmap 형태의 texture로 저장시키고 composition layer작업시 GPU의 메모리에서 작업이 진행된다. (픽셀로 래스터화 시킴 -> 프레임 생성)

CPU 기반 CSS 속성은 left, right, width, height 등이 있고,
GPU 기반 CSS 속성은 transform, opacity 등이 있다.

 

 

 

결론적으론 reflow를 발생시키는 Layer요소의 사용 대신 GPU 애니메이션의 별도 레이어에서 처리를 이용해서 CPU의 메인 스레드 역할만 집중하게 할 수 있어 성능 개선을 할 수 있게 된다.

* 단, 저사용 하드웨어 가속은 성능 저하를 유발 시킨다. 
* 메모리 사용하기에 과도한 용량은 지양한다.

Layer를 발생시키는 스타일/ 메소드

Element : clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth
Position : left, top, position, float
BOX, Border : height, width, padding, margin, display, border-width, border
Range : getBoundingClientRect(), getClientRects()
Window : getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()

 

 

 

[css 애니메이션 성능 최적화를 위한 방법]

1. GPU 가속이 가능한 프로퍼티 (transform, opacity) 를 사용하기.

2. 애니메이션의 반복 횟수를 최소화하여 브라우저의 부하를 줄이기

3. 애니메이션 딜레이 최소화 하기

4. 애니메이션이 실행되는 동안 발생하는 이벤트는 될 수 있으면 줄이기 (성능저하)

5. js를 통한 애니메이션으로 GPU를 통한 하드웨어 가속을 제어하기.

6. 애니메이션 도구 사용하기 

 

 

[css 애니메이션 성능 비교해보기]

#animate {
 animation: playAni 4s;
}
@keyframes playAni{
from{
   left: 0;
   top: 0;
}
 to{
    left: 350px;
    top: 350px;
 }
}

메인 스레드에서 Layout, Painting, Recalculating Style을 계속 수행하게 된다.

> 레이어가 분리되지 않고 reflow가 반복되어 성능을 저하시킨다. 

 

#animate {
 animation: playAni 4s;
}
@keyframes playAni{
from{
   transform: translate(0,0);
}
to{
   transform: translate(350px,350px);
 }
}

컴포지터 쓰레드에서 Composite layer 작업만 수행하게 된다. 

> 새로 레이어가 생성되고 GPU는 렌더링 객체 트리를 메모리에 유지하게 된다. 다시 렌더링 하지 않은 레이어를 얹을 수 있게 된다. 

 

 

[transform]

transform은 부모요소의 영향을 받지 않고 독자적으로 요소의 위치, 확대, 취소, 회전이 가능한 css 요소이다. 

transform은  GPU를 사용하게되어 보다 자연스러운 애니메이션 모션이 가능해지고 CPU에 부담을 덜어 성능 저하를 방지 할 수 있게 된다.  transform 3d의 경우에는 x,y,z 축으로 3차원상에서 이동할 수 있기 때문에 자연스러운 움직임을 구현해낼 수 있다.

 

- transfrom 2D

위치이동: translate (가로, 세로)

회전: rotate

크기: scale

 

- transfrom 3D

위치이동: translate3D(가로, 세로)

회전: rotateZ

크기: scaleZ

 

https://natsgun.tistory.com/m/14?category=850247

CSS Transform 2D / 3D

 

 

[will-change]

 

변화가 예상되는 속성 값이 변경될 때, 미리 브라우저에 알려주어 브라우저가 큰 비용이 드는 변화도 최적화로 인해 페이지 반응성을 증가시킬 수 있다. 

.will-change {
	will-change: transform, opacity;
}

 

1. 너무 많은 요소에 사용하지 말것. 이미 최적화된 사이트라면 굳이 사용하지 않을 것. 과도한 메모리 사용은 오히려 복잡한 렌더링으로 웹 페이지의 성능을 더 저하시키기 때문에 남용하지 않는것이 좋다. 

2. 브라우저의 최적화 과정 마지막은 항상 원래상태로 되돌려 놓는 것. 사용후에는 비활성화로 조절할 수 있는것이 좋다.

will-change에 대해 잘 정리되어 있는 추천 글 : https://wit.nts-corp.com/2017/06/05/4571

CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용) | WIT블로그

 

 

 

 

 

-------------------------------------

 

 

 

[참고사이트]

https://so-so.dev/web/browser-rendering-performance/

https://velog.io/@nala723/CSS-애니메이션-vs-JS-애니메이션

https://wit.nts-corp.com/2017/06/05/4571

https://velog.io/@nala723/CSS-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-vs-JS-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98

https://mong-blog.tistory.com/entry/CSS-%EC%99%9C-transform-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EC%84%B1%EB%8A%A5%EC%9D%B4-%EC%A2%8B%EC%9D%84%EA%B9%8C-with-GPU-Reflow