read : will-change: transform; 적용 테스트 : 기술 #will-change #transform::공대여자홈

브라우저에서 보이는 화면

각 조각은 마우스로 움직일 수 있다.

이동 시 css 의 transform:translate(X,Y) 를 사용

will-change: transform; 를 설정 안함

가로 기준으로 라인의 여러 요소가 협쳐져서 레이어가 존재함.

조각 이동 시 해당 라인의 요소들도 같이 영향을 받는 듯.

will-change: transform; 를 설정 함.
각 조각 별로 레이어가 존재함

조각 이동 시 각 조각만 영향을 받음.

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

요소를 레이어로 만들기에 그만큼 메모리 많이 먹는다.

테스트 해보고 상황에 맞춰서 적용하라.

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	제목	작성자	등록	조회
공지	[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)	공대여자	02/06 13:44	4616
공지	유용한 리눅스(LINUX) 명령어	공대여자	03/03 14:47	14134
공지	[공지] 기술 게시판	mins01	06/24 15:10	14326