[javascript] 페이지 처리 속도를 높이려면 이벤트 핸들러를 ‘수동’으로 표시하십시오.

JAVASCRIPT / 글쓴이

드래그하는 데 망치를 사용하고 있으며 다른 경고 메시지가 표시되어 다른 물건을 넣을 때 고르지 않습니다.

‘touchstart’입력 이벤트 처리가 메인 스레드 사용 중으로 인해 X ms 동안 지연되었습니다. 페이지 처리 속도를 높이려면 이벤트 핸들러를 ‘수동’으로 표시하십시오.

그래서 청취자에게 ‘수동’을 추가하려고했습니다.

Hammer(element[0]).on("touchstart", function(ev) {
  // stuff
}, {
  passive: true
});

하지만 여전히이 경고가 나타납니다.

답변

이 경고를 처음 수신 한 사용자 에게는 최신 이벤트 (2016 년 여름)에 브라우저에서 구현 된 수동 이벤트 리스너 라는 최첨단 기능 때문 입니다. 에서 https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md :

수동 이벤트 리스너 는 DOM 사양의 새로운 기능으로, 개발자가 터치 및 휠 이벤트 리스너를 차단하기 위해 스크롤 할 필요가 없어 스크롤 성능을 향상시킬 수 있습니다. 개발자는 {passive : true}로 터치 및 휠 리스너에 주석을 달아 preventDefault를 호출하지 않을 것임을 나타낼 수 있습니다. 이 기능은 Chrome 51, Firefox 49와 함께 제공되며 WebKit으로 제공됩니다. 자세한 공식 설명은 여기를 참조하십시오.

참조 : 수동 이벤트 리스너은 무엇입니까?

.js 라이브러리가 지원을 구현할 때까지 기다려야 할 수도 있습니다.

JavaScript 라이브러리를 통해 간접적으로 이벤트를 처리하는 경우 해당 라이브러리가 기능을 지원하는 데 도움이 될 수 있습니다. 2019 년 12 월 현재 주요 라이브러리가 지원을 구현 한 것처럼 보이지 않습니다. 몇 가지 예 :

답변

경고 메시지가 숨겨집니다.

jQuery.event.special.touchstart = {
  setup: function( _, ns, handle ) {
      this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
  }
};

답변

Laravel의 select2 드롭 다운 플러그인에서도이 문제가 발생합니다. Alfred Wallace가 제안한대로 값 변경

this.element.addEventListener(t, e, !1)

에

this.element.addEventListener(t, e, { passive: true} )

문제를 해결합니다. 왜 다운 투표권을 가지고 있는지 모르겠지만 잘 작동합니다.

답변

레거시 문제로 어려움을 겪고있는 사람들은 오류가 발생하는 줄을 찾아 다음을 추가하십시오 {passive: true}.

this.element.addEventListener(t, e, !1)

된다

this.element.addEventListener(t, e, { passive: true} )

답변

jquery-ui-touch-punch로 jquery-ui-dragable의 경우 Iván Rodríguez와 비슷하게 수정했지만 touchmove에 대한 이벤트 재정의가 하나 더 있습니다.

jQuery.event.special.touchstart = {
    setup: function( _, ns, handle ) {
        this.addEventListener('touchstart', handle, { passive: !ns.includes('noPreventDefault') });
    }
};
jQuery.event.special.touchmove = {
    setup: function( _, ns, handle ) {
        this.addEventListener('touchmove', handle, { passive: !ns.includes('noPreventDefault') });
    }
};

답변

jQuery 3.4.1 slim 에서 작동하는 솔루션을 찾았습니다.

축소하지 않은 후 {passive: true}다음과 같이 1567 행에서 addEventListener 함수에 추가하십시오 .

t.addEventListener(p, a, {passive: true}))

아무것도 깨지 않고 등대 감사는 청취자에 대해 불평하지 않습니다.

답변