렌더링 최적화를 위해 will-change, position vs transform을 알아보겠다. 알아보는 이유는 브라우저 렌더링 과정 중 리플로우, 리페인트 작업 즉, 레이아웃 계산이 빈번하게 일어날 경우 렌더링이 오래 걸려서 웹 페이지 사용에 불편을 준다. 그래서 css 최적화 하는 방법으로 transform, will-change등이 있다.

will-change

개발자가 브라우저에게 특정 요소의 어떤 속성이 변경될 것임을 미리 알리는 역할을 한다. 미리 알려주면 렌더링 방식에 최적화하여 성능을 향상시킬 수 있다.

사용할 시점

주로 애니메이션이나 변화가 예상될 경우에만 사용하고 변화가 필요없는 곳에는 사용하지말자. will-change는 렌더링 최적화를 하여 부드러운 실행이나 레이아웃 변경을 기대할 수 있다.

잘못알고 있던 점

will-change 속성을 사용하면 실제로 변화가 일어나지 않는 요소에도 프레임 먹는줄알았다.(GPU 사용이 기본적으로 조금 일어난다 생각함)

will-change 속성을 적용하고 실제로는 변화가 일어나지 않아도 FPS가 높아지진 않지만 쓸데없는 최적화 작업을 하기에 성능에 좋지않다.

사용 예시

.box {
  will-change: opacity;
  transition: opacity 0.3s ease;
}

.box:hover {
  opacity: 0.5;
}

.box {
  will-change: transform;
}

.box:hover {
  transform: scale(1.2);
}

position

요소의 위치를 상대적 또는 절대적으로 조정할 때 사용된다. 예를들어, 요소를 특정 위치로 이동시키거나, 다른 요소와의 상대적인 위치를 설정하는데 유용하다. position 속성을 사용하면 주변 요소와의 상호작용이 변경될 수 있으며, 변경된 레이아웃은 리플로우가 일어난다.

transform

요소의 변형(위치, 회전, 크기 조정 등) 을 처리한다. transform 속성은 GPU 가속을 활용하여 변형을 처리하므로, 일반적으로 렌더링 성능이 우수하다. 요소의 위치 자체를 변경하지 않기 때문에 주변 요소와 상호작용에 영향을 주지않는다.

렌더링 성능 향상 이유

하드웨어 가속

transform 속성을 사용하면 브라우저는 GPU(Graphics Processing Unit)를 활용하여 변형을 처리한다. GPU 는 일반적으로 더 빠르고 효율적인 성능을 제공하여, 애니메이션 변형 효과를 부드럽게 처리할 수 있다.
CPU를 사용하여 렌더링 하는것 보다 훨씬 우수한 결과를 얻을 수 있다.

리플로우 회피

transform 속성은 요소의 위치, 크기 등을 변형하지만, 요소의 레이아웃 자체를 변경하지는 않는다. 따라서 변형된 요소는 다른 요소에 영향을 주지않고, 리플로우 과정을 거치지 않는다.

주의 할 점

transform 속성이 일반적인 상황에서 렌더링 성능을 향상시키지만, 모든 상황에서 항상 빠른 성능 향상을 보장하진 않는다. 너무 많은 요소에 transform을 적용하거나, 지나치게 복잡한 변형을 사용하는 경우에 오히려 성능 저하가 일어날 수 있다. 적당히 사용하자 ^____^