어떤 css 속성을 선택해야할까 고민할 때 읽어볼 글

mdn에서 성능을 고민할 경우 지침을 알려줬다. 그 글을 한글로 번역해둔것으로 필요할 때 찾아볼 것

 

CSS 애니메이션과 전환을 사용하세요

성능이 나쁜 기술들(예: setTimeout()이나 top/left 위치 설정)을 사용하는 일부 라이브러리의 animate() 함수 대신에 CSS 애니메이션을 사용하세요. 많은 경우, CSS Transitions를 사용하여 작업을 완료할 수 있습니다. 이는 브라우저가 이러한 효과를 최적화하고 GPU를 사용하여 부드럽게 처리하도록 설계되었기 때문에, 프로세서 성능에 미치는 영향을 최소화할 수 있기 때문입니다. 또 다른 장점은 표준화된 구문을 사용하여 이러한 효과를 앱의 나머지 모양과 느낌과 함께 CSS에 정의할 수 있다는 점입니다.

CSS 애니메이션은 keyframes를 사용하여 효과를 매우 세밀하게 제어할 수 있으며, 애니메이션 과정 중에 발생하는 이벤트를 감시하여 애니메이션 과정의 특정 지점에서 수행해야 할 다른 작업을 처리할 수도 있습니다. 이러한 애니메이션은 :hover, :focus, 또는 :target 상태에서 쉽게 트리거되거나, 부모 요소에 동적으로 클래스를 추가하고 제거하여 트리거할 수 있습니다.

즉석에서 애니메이션을 생성하거나 JavaScript로 애니메이션을 수정하고 싶다면, James Long이 작성한 CSS-animations.js라는 간단한 라이브러리를 사용할 수 있습니다.

 

CSS 변환 사용

절대 위치를 조정하고 수학 계산을 직접 하는 대신, transform CSS 속성을 사용하여 콘텐츠의 위치, 크기 등을 조정하세요. 또는 translate, scale, rotate와 같은 개별 변환 속성을 사용할 수도 있습니다. 그 이유는 다시 말하지만, 하드웨어 가속 때문입니다. 브라우저는 이러한 작업을 GPU에서 수행하여 CPU가 다른 작업을 처리할 수 있도록 합니다.

또한, 변환을 사용하면 다른 방법으로는 얻을 수 없는 기능을 제공합니다. 요소를 2D 공간에서 이동할 수 있을 뿐만 아니라, 3차원으로 변환하고, 기울이고 회전하는 등 다양한 변형을 할 수 있습니다. Paul Irish는 translate()의 성능 관점에서의 이점에 대해 심도 있게 분석한 글을 썼습니다(2012). 일반적으로 CSS 애니메이션을 사용할 때와 같은 이점을 얻을 수 있습니다: 작업에 적합한 도구를 사용하고 최적화는 브라우저에 맡깁니다. 또한, 요소를 배치하는 데 있어서 쉽게 확장 가능한 방법을 사용하게 됩니다 — top과 left 위치 설정으로 변환을 시뮬레이션하려면 많은 추가 코드가 필요합니다. 또 다른 장점은 이것이 캔버스 요소에서 작업하는 것과 유사하다는 점입니다.

참고: CSS 애니메이션에서 하드웨어 가속을 얻으려면 translateZ(0.1) 변환을 추가해야 할 수도 있습니다. 위에서 언급한 것처럼, 이는 성능을 향상시킬 수 있습니다. 그러나 과도하게 사용하면 메모리 사용 문제가 발생할 수 있습니다. 이와 관련하여 무엇을 할지는 여러분에게 달려 있습니다 — 테스트를 수행하고 특정 애플리케이션에 가장 적합한 방법을 찾아보세요.

 

setInterval() 대신 requestAnimationFrame()을 사용하세요

setInterval() 호출은 현재 상황에서 가능할 수도, 불가능할 수도 있는 추정된 프레임 속도로 코드를 실행합니다. 이 방법은 브라우저가 실제로 그림을 그리지 않을 때에도 결과를 렌더링하도록 지시합니다. 즉, 비디오 하드웨어가 다음 디스플레이 사이클에 도달하지 않았을 때도 실행됩니다. 이는 프로세서 시간을 낭비하고 사용자 장치의 배터리 수명을 단축시킬 수 있습니다.

대신, window.requestAnimationFrame()을 사용해야 합니다. 이 메서드는 브라우저가 실제로 다음 프레임을 구축할 준비가 되었을 때까지 기다리며, 하드웨어가 실제로 아무 것도 그리지 않을 경우에는 실행되지 않습니다. 이 API의 또 다른 장점은 앱이 화면에 보이지 않을 때(예: 백그라운드에서 다른 작업이 실행 중일 때) 애니메이션이 실행되지 않는다는 것입니다. 이는 배터리 수명을 절약하고 사용자가 밤하늘을 향해 여러분의 이름을 저주하는 것을 막아줍니다.

인터페이스를 간단하게 유지하세요

HTML 앱에서 발견한 주요 성능 문제 중 하나는 많은 DOM 요소를 이동시키면 전체가 느려진다는 점이었습니다. 특히 그 요소들이 많은 그라디언트와 그림자를 가지고 있을 때 그렇습니다. 인터페이스를 단순화하고 드래그 앤 드롭 시 프록시 요소를 이동시키는 것이 큰 도움이 됩니다.

예를 들어, 긴 목록의 요소들(예: 트윗들)을 가지고 있을 때, 모든 요소를 이동시키지 마세요. 대신, 현재 보이는 트윗 집합의 양쪽에 몇 개의 요소만 DOM 트리에 유지하고 나머지는 숨기거나 제거하세요. 데이터를 DOM에 접근하는 대신 JavaScript 객체에 유지하면 앱의 성능이 크게 향상될 수 있습니다. 화면을 데이터 자체가 아닌 데이터의 표현으로 생각하세요. 이는 HTML을 데이터 소스로 사용하지 말라는 것이 아니라, 한 번 읽고 나서 결과 목록에서 위치에 따라 첫 번째와 마지막 요소의 콘텐츠를 변경하면서 10개의 요소를 스크롤하는 것이 보이지 않는 100개의 요소를 이동시키는 것보다 낫다는 의미입니다. 이와 같은 트릭은 게임에서도 스프라이트에 적용됩니다. 화면에 현재 보이지 않는 경우 폴링할 필요가 없습니다. 대신 화면 밖으로 스크롤된 요소를 새로 들어오는 요소로 재사용하세요.


https://developer.mozilla.org/en-US/docs/Web/Performance/Fundamentals#specific_coding_tips_for_application_performance

Performance fundamentals - Web performance | MDN