will-change: transform; 적용 테스트

브라우저에서 보이는 화면


각 조각은 마우스로 움직일 수 있다.
이동 시 css 의 transform:translate(X,Y) 를 사용


chrome 디버거의 layers 에서 보이는 화면


will-change: transform; 를 설정 안함
가로 기준으로 라인의 여러 요소가 협쳐져서 레이어가 존재함.
조각 이동 시 해당 라인의 요소들도 같이 영향을 받는 듯.


will-change: transform; 를 설정 함.
각 조각 별로 레이어가 존재함
조각 이동 시 각 조각만 영향을 받음.


레이어로 만들어지면
composite layers ( 참고 )
로 동작해서 레이어 기준으로 화면 그리는 데 최적화 한다고 함.


will-change: transform;  사용 시 주의

요소를 레이어로 만들기에 그만큼 메모리 많이 먹는다.
테스트 해보고 상황에 맞춰서 적용하라.


좀 더 테스트

200개의 조각을 준비

1. 이동 될 수 있는 모든 요소에 will-change: transform; 적용
=> 모바일 크롬에서 버버벅인다.
.element-move-target{
will-change: transform;
}

2. will-change: transform; 적용 안함
=> 1번보다 덜 하지만 버벅인다

3. 이동하는 요소만 적용
=> 제일 부드럽다. 적용된 요소 1개만 레이어로 동작한다.
-> 최초 클릭시 딜레이가 조금 느껴진다
.element-move-body.moving .element-move-target{
will-change: auto;
}
.element-move-target:hover,
.element-move-target:active,
.element-move-target.element-move-target-moving{
will-change: transform;
}


댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📅 달력형