합성(compositing)은 화면에 표시하기 위해 페이지에서 페인트된 부분을 합치는 과정입니다.
합성(compositing)은 화면에 표시하기 위해 페이지에서 페인트된 부분을 합치는 과정입니다.
이 영역에서 페이지 성능에 영향을 미치는 두 가지 주요 요소가 있습니다. 관리해야 하는 컴포지터 레이어 수와 애니메이션에 사용하는 속성입니다.
요약
- 애니메이션에 변형 및 불투명도 변경을 고수합니다.
will-change또는translateZ를 사용하여 이동 요소를 승격합니다.- 승격 규칙의 남용을 피합니다. 레이어에는 메모리와 관리가 필요합니다.
애니메이션에 변형 및 불투명도 변경 사용
가장 성능이 우수한 픽셀 파이프라인 버전은 레이아웃과 페인트를 모두 피하고 합성 변경만 필요합니다.
이렇게 하려면 컴포지터만으로 처리할 수 있는 변경 속성을 고수해야 합니다. 현재 이 속성이 true인 속성은 transform 및 opacity 두 가지뿐입니다.
transform 및 opacity 사용 시 주의할 점은 이러한 속성을 변경하는 요소가 자체 컴포지터 레이어에 있어야 한다는 것입니다. 레이어를 만들려면 요소를 승격해야 하며, 이에 대해서는 다음에 다룹니다.
애니메이션을 적용할 요소 승격
'페인트 복잡성 단순화 및 페인트 영역 줄이기' 섹션에서 언급했듯이 애니메이션을 적용하려는 요소를 자체 레이어로 승격해야 합니다 (합당한 사유가 있는 경우, 과도하게 사용해서는 안 됩니다).
.moving-element {
will-change: transform;
}
또는 이전 브라우저나 will-change를 지원하지 않는 브라우저의 경우 다음을 실행합니다.
.moving-element {
transform: translateZ(0);
}
레이어 관리 및 레이어 급증 피하기
레이어가 성능에 도움이 되는 경우가 많다는 점을 알고 다음과 같이 페이지의 모든 요소를 승격하는 것은 매력적일 것입니다.
* {
will-change: transform;
transform: translateZ(0);
}
즉, 페이지의 모든 단일 요소를 승격하고 싶다는 의미입니다. 여기서 문제는 생성하는 모든 레이어가 메모리와 관리가 필요하며, 이는 무료가 아니라는 점입니다. 실제로 메모리가 제한된 기기에서는 성능에 미치는 영향이 레이어 생성의 이점보다 훨씬 클 수 있습니다. 모든 레이어의 텍스처는 GPU에 업로드해야 하므로 CPU와 GPU 간의 대역폭과 GPU의 텍스처에 사용할 수 있는 메모리에 추가적인 제약 조건이 있습니다.
Chrome DevTools를 사용하여 앱의 레이어 이해하기
애플리케이션의 레이어를 이해하고 요소에 레이어가 있는 이유를 이해하려면 Chrome DevTools의 타임라인에서 페인트 프로파일러를 활성화해야 합니다.
이 기능을 켜면 녹화를 해야 합니다. 녹화가 완료되면 개별 프레임을 클릭할 수 있습니다. 이 프레임은 초당 프레임 막대와 세부정보 사이에 있습니다.
이것을 클릭하면 세부정보에서 새로운 옵션인 레이어 탭이 제공됩니다.
이 옵션을 사용하면 각 레이어가 만들어진 이유와 함께 해당 프레임 중에 모든 레이어를 화면 이동, 스캔 및 확대할 수 있는 새 뷰가 표시됩니다.
이 보기를 사용하여 레이어의 수를 추적할 수 있습니다. 스크롤 또는 전환과 같이 성능이 중요한 작업 중에 합성에 많은 시간을 할애하는 경우 (약 4~5ms를 목표로 해야 함) 여기에 나와 있는 정보를 사용하여 얼마나 많은 레이어가 있는지, 왜 생성되었는지 확인하고 앱의 레이어 수를 관리할 수 있습니다.