목차
💡 터치 및 휠 이벤트 리스너는 페이지 성능에 어떤 영향을 줍니까?
💡 스크롤 성능을 향상시키기 위해 수동 리스너를 구현하는 방법은 무엇입니까?
패시브 이벤트 리스너를 이해하기 위해서는 몇 가지 개념을 알아야 합니다.
● 스크롤 성능과 사용자 경험
웹 페이지에서의 스크롤 성능은 사용자가 웹 사이트를 원활하게 탐색하는 데 중요한 역할을 합니다. 부드럽고 빠른 스크롤은 사용자가 웹 페이지를 쾌적하게 이용할 수 있도록 도와줍니다.
● 터치 및 휠 이벤트 리스너
웹 페이지는 사용자의 터치 (스마트폰이나 태블릿에서 손가락으로 스크롤) 및 휠 (마우스 휠로 스크롤) 입력을 감지하고 처리하는 코드를 가지고 있습니다. 이것을 이벤트 리스너라고 부릅니다.
● 자바스크립트와 메인 스레드
웹 페이지의 동작은 JavaScript라는 언어로 제어됩니다. 이 코드의 실행은 메인 스레드라고 불리는 중요한 부분에서 이루어집니다. 이 스레드가 바쁘게 일하면 스크롤 동작이 느려지고 페이지가 뚝뚝 끊기는 현상이 발생할 수 있습니다.
● 패시브 이벤트 리스너
패시브 이벤트 리스너를 사용하면 터치 및 휠 이벤트 리스너가 메인 스레드를 차단하지 않고 스크롤 이벤트를 처리할 수 있습니다. 이것은 사용자의 스크롤 경험을 향상시키는 데 도움이 됩니다.
패시브 이벤트 리스너를 사용하면 주 스레드가 다른 중요한 작업에 집중할 수 있으므로 스크롤이 부드럽게 이루어집니다. 이것은 사용자가 웹 페이지를 더 쾌적하게 탐색할 수 있게 해주고, 웹 페이지가 더 빠르게 반응하게 만듭니다. 이것은 웹 페이지의 성능과 사용자 경험을 향상시키는데 도움이 되는 중요한 기술입니다.
💡 터치 및 휠 이벤트 리스너는 페이지 성능에 어떤 영향을 줍니까?
터치 및 휠 이벤트 리스너는 사용자의 스크롤 동작을 감지하고 처리하는 역할을 합니다. 이러한 리스너는 웹 페이지가 사용자의 입력을 인식하고 그에 따라 반응하는 데 사용됩니다. 그러나 이러한 이벤트 리스너가 많거나 복잡한 작업을 처리해야 할 때, 웹 페이지의 성능이 저하될 수 있습니다.
예를 들어, 사용자가 웹 페이지를 스크롤하면, 브라우저는 스크롤 이벤트를 처리하기 위해 이벤트 리스너를 호출합니다. 그러나 기본적으로 브라우저는 이러한 이벤트 처리를 기다리며, 다른 작업을 중단합니다. 이것은 사용자가 웹 페이지를 부드럽게 스크롤하지 못하게 하고, 페이지가 응답하지 않는 것처럼 느껴질 수 있습니다.
패시브 이벤트 리스너는 이 문제를 해결하기 위한 방법 중 하나입니다. 이를 사용하면 브라우저에게 "이 이벤트는 스크롤을 차단하지 않는다"라고 알려줄 수 있습니다. 즉, 이벤트 리스너가 스크롤 동작을 중단하지 않고도 사용자 입력을 처리할 수 있게 됩니다.
이로써 사용자가 웹 페이지를 스크롤할 때 스무스하게 동작하고, 페이지가 빠르게 반응하는 데 도움을 줍니다. 따라서 패시브 이벤트
리스너를 사용하면 웹 페이지의 성능과 사용자 경험이 향상됩니다.
이벤트 리스너는 입력의 성격에 따라 다음과 같이 분류됩니다.
● 스크롤 이벤트 리스너
스크롤 막대 또는 스크롤 휠의 움직임을 감지하고 처리합니다. 사용자가 웹 페이지를 스크롤할 때 발생하는 이벤트를 다룹니다.
● 포인터 이벤트 리스너
마우스 포인터 입력을 추적하고 처리합니다. 마우스의 움직임, 클릭, 드래그 등과 관련된 이벤트를 다룹니다.
● 터치 이벤트 리스너
터치 스크린 디바이스(스마트폰 또는 태블릿)에서 발생하는 터치 입력을 감지하고 처리합니다. 손가락으로 화면을 탭, 스와이프, 핀치 등의 동작을 다룹니다.
● 휠 이벤트 리스너
마우스 휠 또는 트랙패드 스크롤 입력을 추적하고 처리합니다. 마우스 휠을 위로 또는 아래로 굴릴 때 발생하는 이벤트를 다룹니다. 이러한 이벤트 리스너는 웹 개발에서 사용자 인터페이스를 다양하게 제어하고 상호 작용하는 데 중요한 역할을 합니다. 각각의 이벤트 유형은 웹 페이지나 앱의 사용자 경험을 향상시키기 위해 활용됩니다.
간단히 말하면, 패시브 이벤트 리스너는 웹 페이지의 스크롤 성능을 개선하기 위한 기술로, 브라우저에게 "스크롤을 차단하지 말고 이벤트를 처리해줘"라고 말함으로써 페이지가 더 부드럽게 스크롤되고 빠르게 반응하도록 도와주는 것입니다.
💡 스크롤 성능을 향상시키기 위해 수동 리스너를 구현하는 방법은 무엇입니까?
● 스크롤 이벤트를 적절한 타이밍에 등록하고 처리하기
스크롤 이벤트를 등록할 때, 이벤트 핸들러가 페이지 로딩 초기에 실행되는 것을 피해야 합니다. 대신, 페이지의 모든 리소스가 로드된 후에 이벤트를 등록하도록 해야 합니다. 아래는 이를 구체화한 예시입니다.
● 불필요한 이벤트 처리 최소화
스크롤 이벤트의 빈도를 제어하여 불필요한 처리를 최소화할 수 있습니다. 예를 들어, 스크롤 이벤트 핸들러 내에서 많은 계산을 수행하는 것은 지양해야 합니다. 이러한 계산을 디바운싱 또는 쓰로틀링을 사용하여 제어할 수 있습니다. 아래는 디바운싱 예시입니다.
● 이벤트 핸들러 내에서 최적화된 코드 작성
스크롤 이벤트 핸들러 내에서 최적화된 코드를 작성하여 성능을 개선할 수 있습니다. 예를 들어, 가능한 한 적은 DOM 조작을 수행하고, 자주 사용하는 변수를 캐싱하여 중복 계산을 피하는 것이 좋습니다. 또한, 필요하지 않은 리소스를 미리로드하는 것도 성능 향상에 도움이 될 수 있습니다.
● 패시브 이벤트 리스너 사용
페이지의 성능을 더 향상시키려면, 스크롤 이벤트 리스너에 passive: true 플래그를 추가하여 브라우저에게 이벤트를 차단하지 않고 처리하도록 지시할 수 있습니다. 이를 통해 스크롤이 부드럽게 이루어질 수 있습니다
'E-커머스 쇼핑몰 운영' 카테고리의 다른 글
| [온라인 쇼핑몰 속도 최적화] 모든 리소스에 HTTP/2 사용 (0) | 2024.10.30 |
|---|---|
| [온라인 쇼핑몰 속도 최적화] 이미지 요소에 명시적 너비와 높이 사용 (0) | 2024.10.29 |
| [온라인 쇼핑몰 속도 최적화] Third-party 코드의 영향 감소 (1) | 2024.10.26 |
| [온라인 쇼핑몰 속도 최적화] 중요 요청 미리 로드 (0) | 2024.10.25 |
| [온라인 쇼핑몰 속도 최적화] JavaScript 실행 시간 단축 (1) | 2024.10.24 |