이벤트 전파(event propagation), 웹 성능 최적화 방법

이벤트 전파(event propagation)

이벤트 전파는 DOM에서 발생한 이벤트가 어떻게 전달되는지를 설명하는 중요한 개념이며, 이 과정은 캡처링, 타겟, 버블링으로 크게 세 단계로 나눠진다.

1. 캡처링(Capturing) 단계
   • 이벤트가 DOM 트리에서 최상위 요소인 document에서 시작해, 실제 이벤트가 발생한 요소인 타겟으로 내려가는 단계이며, 이 단계에서는 상위 요소에 등록된 이벤트 리스너들이 순차적으로 실행된다.
2. 타겟(Target) 단계
   • 이벤트가 실제로 발생한 타겟 요소에 도달하는 단계이며, 이 때 해당 타겟 요소에 등록된 이벤트 리스너가 실행된다.
3. 버블링(Bubbling) 단계
   • 이벤트가 타겟 요소에서 발생한 후, 다시 DOM 트리의 상위 요소들로 올라가며 전파되는 단계이며, 이 과정에서 상위 요소들에 등록된 이벤트 리스너들이 실행된다.
   • 기본적으로 많은 이벤트는 이 버블링 단계에서 전파된다.

기본적으로 이벤트는 버블링을 통해 전파되지만, addEventListener의 세 번째 인자로 { capture: true }를 설정하면 캡처링 단계에서 이벤트를 처리할 수 있다.

이벤트 전파가 원치 않는 방식으로 진행되는 경우 event.stopPropagation() 메소드를 사용하여 이벤트의 전파를 중지시킬 수 있으며, 이 메소드는 캡처링, 타겟, 버블링 단계 중 어느 단계에서든 사용될 수 있다.

이벤트 전파는 DOM 요소 간의 상호작용을 효과적으로 관리하고, 필요한 경우 특정 이벤트를 제어할 수 있게 해준다.

---

웹 성능 최적화 방법

1. 코드 스플리팅 (Code Splitting)

• 코드 스플리팅은 자바스크립트 파일을 여러 개로 나누어 필요한 부분만 로드하는 기법이며, 이를 통해 페이지가 로드될 때 불필요한 코드를 한꺼번에 불러오는 대신, 사용자가 즉시 필요로 하는 코드만 먼저 불러올 수 있다.
• 이 방식은 초기 로딩 시간을 단축시키고, 특히 큰 어플리케이션에서 성능 향상에 큰 도움이 된다.

2. 레이지 로딩 (Lazy Loading)

• 레이지 로딩은 사용자가 실제로 페이지 내에서 해당 리소스를 볼 때만 로드되는 방식이다.
• 예를 들어, 이미지나 비디오와 같은 리소스들이 사용자가 페이지를 스크롤할 때 필요해지면 그때 불러오는 것이며, 이를 통해 초기 로딩에서 불필요한 리소스를 미리 로드하는 것을 방지하고, 성능을 최적화할 수 있다.

3. 이미지 최적화

• 이미지는 웹 페이지에서 중요한 리소스지만, 용량이 클 경우 로딩 속도를 저하시킬 수 있기 때문에 이미지 최적화는 전체 페이지 성능 향상에 기여하는 중요한 요소이다.
• 이를 해결하기 위해 이미지를 적절히 크기를 줄이거나, 더 효율적인 이미지 포맷인 WebP로 변환하면 로딩 시간이 단축된다.

4. 캐싱 (Caching)

• 브라우저 캐싱을 활용하면, 한 번 로드된 리소스를 다시 다운로드하지 않고 재사용할 수 있어 성능이 크게 향상된다.
• 적절한 캐시 정책을 설정하여 자주 변경되지 않는 리소스들은 캐시된 데이터로 처리하고, 변경된 리소스만 새로 다운로드하도록 하면 네트워크 트래픽을 줄이고 성능을 개선할 수 있다.

5. 자바스크립트 로딩 최적화

• 자바스크립트를 로드할 때, async나 defer 속성을 활용하여 자바스크립트 파일이 DOM을 차단하지 않도록 할 수 있다.
• async는 자바스크립트를 비동기적으로 로드하고 실행되게 하며, defer는 HTML 문서의 파싱이 끝난 후에 자바스크립트를 실행하도록 하는데, 이 방법들은 페이지가 빠르게 로드되도록 도와주며, 사용자 경험을 향상시킬 수 있다.