.will-change {
will-change: transform, opacity;
}
will-change 를 스타일에 설정해 놓으면
해당 노드는 레이어로 취급되며, 설정된 값을 처리하기 위해서 미리 준비를 한다.
- will-change 설정 시
- 추가적인 메모리와 추가적인 렌더링을 사용한다.
- 너무 많은 노드에 적용하면 페이지 동작에 악영향을 미친다. (너무 많은 메모리 사용 등)
- 필요한 node에만 적용 될 수 있도록 하자. (링크의 내용 잘 읽어보시오)
- 해당 노드의 애니메이션 동작이 GPU 가속 등을 사용하여 최적화 된다.
과거 will-change가 지원 안될 때 GPU 가속을 사용하기 위해서
노드를 레이어로 인식 시키기 위해서
translateZ(0), translate3D(0,0,0)
처럼 설정하기도 하였다.