[TIL] 2022/10/19

• GPU를 쓰도록 css 설정을 하고 싶을 때 '레이어 핵(Layer Hack)'을 쓸 수 있다. 예를 들어,

<div style="transform:translateZ(0);"></div>

위와 같은 흔히 알고 있는 CSS style에 3d를 붙여주면

<div style="transform:translate3d(0,0,0);"></div>

GPU 가속을 활성화시킬 수 있다고 한다. 그러나, GPU 가속을 사용하면 웹 페이지의 렌더링 속도가 빨라지긴 하지만(CPU 대신 GPU를 써서 역할을 분담하므로), 사용을 남발하면 오히려 렌더링 속도가 느려지거나 브라우저에 문제가 일어날 수 있다(당연한 소리지만 유의).

• 위와 같은 방법 외에도 'will-change' 라는 CSS 속성을 쓸 수 있다. 예를 들어, 특정 부분에서 opacity 속성이 변경될 예정이라고 했을 때(동적인 속성이라고 해보자),

will-change: transform, opacity; 

위와 같이 브라우저에게 이 부분은 바뀔 것이다 라고 언지를 주는식으로 최적화를 할 수 있다(이 때, Height은 먹히지 않는다고 한다). will-change가 레이어핵(말그대로 핵처럼 불필요한 비용을 써서 브라우저에게 억지로 생성시키는 것)보다 효율적이라고 한다. 그러나 이러한 will-change도 모든 것에 적용하면 오히려 메모리 낭비를 초래하기 때문에 꼭 필요한 부분에 선택적으로 적용하도록 한다.
** 하지만, 상황에 따라 변경이 완료된 이후 제거하지 않고 유지하는 것이 필요할 때도 있다.

• 사용자가 지속적으로 상호 작용하는 것이 전제되고 빠른 응답을 요구하는 작업(게임 상에서 유저가 클릭해서 이동을 하는 인터랙션은 매우 자주 사용될건데 이런 부분에 써도 좋을 것 같다)
• 페이지에서 거의 항상 변경되는 엘리먼트 혹은 인터랙션(아바타에 계속해서 따라다니는 이름표와 같은걸 RAF로 구현할 때 쓰면 좋을 것 같다)

위의 경우는 항상 혹은 정기적으로 변화하기 때문에 최적화도 유지될 필요가 있다.

이때는 will-change 속성을 매번 제거하고 다시 설정하는 것보다 제거하지 않고, 계속 유지하는 것이 더 나은 성능을 얻을 수 있다.

** 예시

1. 유저의 요청에 따라 사이드바를 슬라이드하는 경우

.side-bar {
  will-change: transform;
}

2. RequestAnimationFrame을 통해 계속해서 position의 top, left 값을 변경하는 경우

.NamePlate {
  will-change: left, top;
}

출처 : https://blog.naver.com/sknglee22