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	17098
공지	유용한 리눅스(LINUX) 명령어	공대여자	03/03 14:47	27536
공지	[공지] 기술 게시판	mins01	06/24 15:10	27481

일	월	화	수	목	금	토
12.1	12.2	12.3	12.4	12.5	12.6 ui_booklet e-book 1	12.7
12.8	12.9	12.10	12.11 검색엔진 로봇의 크롤링 제어 - robots.txt 검색엔진 인덱스 제어하기 - noindex , nofollow	12.12	12.13	12.14
12.15	12.16 JS에서 시간 출력 new 1 js 의 setCustomValidity 사용한 비번 체크 new pixijs 2D WebGL renderer new 1 canvas의 width와 height 의 setter를 wrap 처리 하는 방법 new	12.17 HTML Element 상속 후 element 등록하는 방법 new showPicker(). input 이나 select의 선택시 픽커 보이게 하는 메소드 new 1	12.18	12.19	12.20 vscode 에서 코파일럿 테스트 new vscode 에서 코파일럿 테스트 일반 질문 new	12.21
12.22	12.23	12.24	12.25	12.26	12.27	12.28
12.29	12.30	12.31	1.1	1.2	1.3	1.4