이벤트의 개수를 줄여라.

sujeong kim·2021년 6월 4일
0

이벤트의 개수가 많다는 것은 브라우저가 감시해야 하는 개체 수가 그만큼 많다는 얘기입니다.
감시할 대상이 많으면 성능이 떨어지겠죠?

따라서, 프론트 개발을 할 때 최적화를 위해 이벤트의 개수를 최소화 하는 것을 고민해 봅시다.

(1) 이벤트 위임
최소화 하기 위한 방법으로 이벤트 위임이 있습니다.
부모에게 이벤트를 걸고, e.target으로 해당 요소의 이벤트 로직을 작성합니다.
부모에게 이벤트를 걸고, 해당 요소에 이벤트를 발생시켰음에도 이벤트가 잘 동작하는 이유는 버블링때문입니다.
버블링은 해당 요소에 이벤트가 발생하면 부모에게까지 그 이벤트 트리거가 전달되는 것입니다.

어떤 부모에게 위임할 지는 고민해봐야 하는데 최상위 엘리먼트에 모든 이벤트가 집중된 경우
매 이벤트 동작마다 등록된 모든 이벤트를 탐색해야하는 불필요한 연산이 발생하게되고,
더이상 사용되지 않는 자식요소 DOM 엘리먼트 제거시 바인딩된 이벤트를 직접 제거해 주지 않는 경우에도 불필요한 연산이 발생합니다.

profile
개발자

0개의 댓글