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}}
    -
tag
제목 작성자 날짜
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
#기본형
공대여자
유용한 리눅스(LINUX) 명령어
#linux #command
공대여자
[공지] 기술 게시판
#etc #공지
mins01
:scope selector , querySelector 에서 this, self node 지정 new 1
#css #this #self #scope
공대여자
bootstrap extensions 부트스트랩 확장 2
#bootstrap #css
공대여자
scrollbars styling 1
#css #scrollbars #styling
공대여자
css로 만든 태양계 공전 자전 표시 1
#css
공대여자
ui_jigsaw 2
#css #jigsaw #piece #ui
공대여자
css mask 1
#css #style #mask
공대여자
css clip-path 1
#style #clip-path #css
공대여자
PC 해상도에 따른 보이는 영역 테스트 1
#css #page #해상도
공대여자
css offset 2
#css #offset
공대여자
css 네이밍 container vs wrapper
#css #container #wrapper
공대여자
css aspect-ratio 1
#aspect-ratio #css
공대여자
preserve-3d multi-layers 1
#css #preserve-3d
공대여자
css transition vs animation
#css #transition #animation
공대여자
css effect - grid 1
#css #effect #grid
공대여자
cubic-bezier 1
#css
공대여자
tag