[javascript] 수동 이벤트 리스너 란 무엇입니까?

Program / 글쓴이

진보적 인 웹 앱의 성능을 향상시키기 위해 노력하면서 새로운 기능 Passive Event Listeners을 발견했으며 개념을 이해하기가 어렵습니다.

무엇 Passive Event Listeners과 그것이 우리의 프로젝트에있을 필요는 무엇인가?

답변

수동 이벤트 리스너는 Chrome 51에 포함 된 새로운 웹 표준 기능으로, 스크롤 성능을 크게 향상시킵니다. 크롬 출시 정보.

이를 통해 개발자는 터치 및 휠 이벤트 리스너를 차단하기 위해 스크롤 할 필요가 없어서 스크롤 성능을 향상시킬 수 있습니다.

문제 : 모든 최신 브라우저가 비싼 자바 스크립트가 실행되는 경우에도 원활하게 실행하기 위해 스크롤을 허용하는 기능을 스크롤 스레드,하지만이 최적화가 부분적으로 어떤 결과를 기다릴 필요에 의해 패배 touchstart하고 touchmove호출하여 스크롤을 완전히 방지 할 수 처리기, preventDefault()이벤트에.

해결책: {passive: true}

터치 또는 휠 리스너를 수동으로 표시함으로써 개발자는 처리기가 preventDefault스크롤을 비활성화하도록 호출하지 않을 것을 약속합니다 . This frees the browser up to respond to scrolling immediately without waiting for JavaScript, thus ensuring a reliably smooth scrolling experience for the user.

document.addEventListener("touchstart", function(e) {
    console.log(e.defaultPrevented);  // will be false
    e.preventDefault();   // does nothing since the listener is passive
    console.log(e.defaultPrevented);  // still false
}, Modernizr.passiveeventlisteners ? {passive: true} : false);

DOM 사양 , 데모 비디오 , Explainer Doc

답변