will-change

Title

will-change

Tags

Aliases

will-change

Created

2 years ago

Updated

last year

새 레이어를 생성하는 가장 좋은 방법은 will-change CSS 속성을 사용하는 것입니다. - 페인트 복잡성 단순화 및 페인트 영역 줄이기 | Web Fundamentals | Google Developers

요소에 예상되는 변화의 종류에 관한 힌트를 브라우저에게 제공한다.
- 실제 요소가 변화되기 전에 적절하게 최적화할 수 있다.
- 새 컴포지터(Compositor) 레이어를 강제로 생성한다고 표현한다. - Google Web Fundamentals
리플로우(Reflow) vs 리페인트(Repaint)를 일으키지 않는 속성(transfroms, opacity)을 변경하는 요소가 자체 컴포지터 레이어에 있어야 한다.
이전 브라우저나 will-change를 지원하지 않는 브라우저의 경우에는 translateZ를 사용한다.

css

.component {
	will-change: transform;
}

.component {
	will-change: transform;
}

Related #