mouse 이벤트에 관한 최적화 역시 부분적으로 진행했다.
throttle을 활용하여 Block 내의 mousemove, scroll 이벤트를 최적화했다.
단위는, 체감상 약 0.02가 가장 자연스러웠다. (아무래도 세밀한 컨트롤을 요하는 작업이다보니, UX의 역치가 상당히 낮아 단위를 크게 잡을 수 없었다.)
확실히 뭔가 빨라진 느낌이 들었다!
실제로 같은 행위를 콘솔로 찍어봤을 때 어림잡아 약 50%의 성능이 개선되었다.
📎 관련 이슈
closes #74
76
💡 논의해볼 사항
mouseMoveAtom
결국 mousemove하는 로직이 반복되는데, 내가 알기로는 e.clientX등의 마우스 정보는 리플로우를 유발하는 것으로 알고 있다.
따라서 이를 최대한 같은 곳에서 사용할 수 있도록 전역에서 상태관리를 하는 아이디어를 떠올렸다.
다만, 이러한 mousemove가 동작하지 않을 때에는 이벤트 하나가 쓸 데 없이 생성되는 문제가 있다.
따라서 mouseState.moveActived라는 프로퍼티를 추가하여, 이 프로퍼티가 true일 때만 이벤트를 추가하는 것으로 최적화했다.
💌 설명
mouse 이벤트에 관한 최적화 역시 부분적으로 진행했다.
throttle을 활용하여 Block 내의mousemove,scroll이벤트를 최적화했다. 단위는, 체감상 약 0.02가 가장 자연스러웠다. (아무래도 세밀한 컨트롤을 요하는 작업이다보니, UX의 역치가 상당히 낮아 단위를 크게 잡을 수 없었다.)확실히 뭔가 빨라진 느낌이 들었다! 실제로 같은 행위를 콘솔로 찍어봤을 때 어림잡아 약 50%의 성능이 개선되었다.
📎 관련 이슈
closes #74
76
💡 논의해볼 사항
mouseMoveAtom
결국
mousemove하는 로직이 반복되는데, 내가 알기로는e.clientX등의 마우스 정보는 리플로우를 유발하는 것으로 알고 있다. 따라서 이를 최대한 같은 곳에서 사용할 수 있도록 전역에서 상태관리를 하는 아이디어를 떠올렸다. 다만, 이러한mousemove가 동작하지 않을 때에는 이벤트 하나가 쓸 데 없이 생성되는 문제가 있다. 따라서mouseState.moveActived라는 프로퍼티를 추가하여, 이 프로퍼티가true일 때만 이벤트를 추가하는 것으로 최적화했다.📝 참고자료
⚠️ 잠깐! 한 번 체크해주세요.