작성
·
953
1
안녕하세요
좋은 강의 잘 듣고 있습니다
passive를 적용했을때 "터치 혹은 휠 이벤트로 발생하는 스크롤 성능을 향상시킨다" 라고 설명해주셨는데요
무슨 의미인지 잘 모르겠습니다 ^^;
적용되는 또는 적용될만한 상황을 조금 더 알려주실 수 있으실까요?
답변 3
1
1
강의 들어주셔서 감사합니다. :)
아래 코드와 같이 터치, 휠 이벤트는 preventDefault를 사용하면 스크롤을 막을 수 있습니다.
<script>
function handle (event) {
event.preventDefault();
}
</script>
<div on:wheel={handle} on:touchmove={handle}></div>
<style>
div {
height: 200vh;
}
</style>
브라우저에서는 터치 혹은 휠 이벤트가 발생할 때 마다 스크롤을 할지 말지 결정을 해야 합니다. 스크롤이 발생하면 많은 이벤트가 발생하게 되는데, 이벤트 마다 스크롤을 할지 말지 판단하게 된다면 브라우저는 느려질 수 있습니다.
이때 passive 속성을 사용해서 브라우저에게 preventDefault를 사용해서 스크롤을 막지 않겠다고 알려줍니다. 그러면 브라우저는 항상 스크롤을 하는 것으로 인식하고, 스크롤 할지 말지 결정하는데 낭비되는 자원을 절약해서 성능을 향상 시킬 수 있게 됩니다.
참고가 될 만한 링크입니다.
http://sculove.github.io/blog/2016/12/29/addEventListener-passive/
https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener
0