진보적 인 웹 앱의 성능을 향상시키기 위해 노력하면서 새로운 기능 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