[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. 해결하기.

웹 브라우저에서의 성능 관련 경고 메시지 해결하기

 

경고 메시지

[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event.
Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Console 창에 나타나는 [Violation] 메시지는 Chrome 또는 다른 웹 브라우저에서 성능 관련 경고다.

이러한 경고는 '오류'를 나타내는 것이 아니라, 애플리케이션의 성능을 개선할 수 있도록 도와주는 '경고 메시지'라고 보면 된다.

위 경고 메시지는 jQuery에서 mousewheel, touchstart, touchmove 이벤트를 사용할 때 나타나는 메시지로 보인다. 아래 이슈를 보면 알겠지만 버전 4로 업데이트할 때 해결할 예정이라는데.. 현재 글 쓴 날짜 기준 제이쿼리는 3.7.* 버전인 걸 생각하면^^ 업데이트는 아주 아주 멀었다고 볼 수 있으려나?ㅎ

https://github.com/jquery/jquery/issues/3752

passive listener for all · Issue #3752 · jquery/jquery

 

해결 방법

해결 방법은 비교적 심플하다.

jQuery 자체에서 passive 옵션을 사용할 수 없기 때문에, 아래와 같이 jQuery에서 제공해주는 이벤트 시스템을 사용하면 된다.

$.event.special.mousewheel = {
    setup: function(_, ns, handle) {
        this.addEventListener('mousewheel', handle, { passive: true });
    }
};

 

코드 설명

$.event.special란?

jQuery에서 제공하는 기능으로 사용자 정의 이벤트를 생성할 수 있다. 위 예시처럼 사용할 경우 setup 함수를 통해, mousewheel 이벤트에 추가적인 기능을 구현할 수 있다. 이때 중요한 건 세 번째 매개변수인 handle인데, handle은 이벤트 핸들러를 의미한다. (이벤트가 발생했을 때 호출될 함수)

{ passive: true } 옵션은 이벤트 리스너가 preventDefault()를 호출하지 않겠다고 브라우저에게 알려준다. 보통 스크롤 성능을 향상 시키기 위해서 사용한다.