logo image
메인
기술
HOME
기술

will-change

1
목록
#css #will-change
.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}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
일
월
화
수
목
금
토
4.28
4.29
4.30
5.1
5.2
5.3
5.4
5.5
5.6
5.7
5.8
5.9
5.10
5.11
5.12
5.13
5.14
5.15
5.16
5.17
5.18
5.19
5.20
5.21
5.22
5.23
5.24
5.25
5.26
5.27
5.28
5.29
5.30
5.31
6.1
tag