will-change

1
.will-change {
  will-change: transform, opacity;
}

will-change 를 스타일에 설정해 놓으면
해당 노드는 레이어로 취급되며, 설정된 값을 처리하기 위해서 미리 준비를 한다.

  • will-change 설정 시 
    • 추가적인 메모리와 추가적인 렌더링을  사용한다. 
      • 너무 많은 노드에 적용하면 페이지 동작에 악영향을 미친다. (너무 많은 메모리 사용 등)
      • 필요한 node에만 적용 될 수 있도록 하자. (링크의 내용 잘 읽어보시오)
    • 해당 노드의 애니메이션 동작이 GPU 가속 등을 사용하여 최적화 된다.

과거 will-change가 지원 안될 때 GPU 가속을 사용하기 위해서
노드를 레이어로 인식 시키기 위해서
translateZ(0), translate3D(0,0,0)
처럼 설정하기도 하였다.
댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
제목 작성자 날짜
공대여자
공대여자
mins01
공대여자