페이지 응답성을 높이려면 이벤트 핸들러를 '수동'으로 표시하십시오.

페이지 응답성을 높이려면 이벤트 핸들러를 '수동'으로 표시하십시오.

이 경고 메시지에서 알 수 있듯이, 저는 해머를 사용하여 드래그하고 있는데, 다른 물건을 적재할 때 흔들림이 있습니다.

메인 스레드가 사용 중이어서 '터치 스타트' 입력 이벤트 처리가 Xms 동안 지연되었습니다.페이지 응답성을 높이려면 이벤트 핸들러를 '수동'으로 표시하십시오.

그래서 이렇게 듣는 사람에게 '수동'을 붙이려고 했어요.

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

그래도 경고음이 계속 울려요.

이 경고를 처음 받는 사람들은 최근(2016년 여름) 브라우저에 구현된 Passive Event Listeners라는 블리딩 에지 기능 때문입니다.https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md 에서 :

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

다음 항목도 참조하십시오.수동 이벤트 청취자란 무엇입니까?

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

JavaScript 라이브러리를 통해 간접적으로 이벤트를 처리하는 경우 해당 라이브러리의 기능에 대한 지원에 좌우될 수 있습니다.2019년 12월 현재 주요 도서관은 지원을 실시하지 않은 것으로 보입니다.몇 가지 예:

• jQuery.js - 진행 중인 문제 : https://github.com/jquery/jquery/issues/2871
• React.js - 진행 중인 문제: https://github.com/facebook/react/issues/6436
  대응 17 토론 : https://github.com/facebook/react/issues/19651
• Hammer.js - 후속 조치가 없어 종료되었습니다.https://github.com/hammerjs/hammer.js/pull/987
• perfect-closed-bar - closed :https://github.com/noraesae/perfect-scrollbar/issues/560
• Angular JS - 해결되지 않아 종료:https://github.com/angular/angular.js/issues/15901

그러면 다음 경고 메시지가 숨겨집니다.

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

다음 라이브러리로 문제가 해결되었습니다.
이 코드를 프로젝트에 추가하기만 하면 됩니다.

<script type="text/javascript" src="https://unpkg.com/default-passive-events"></script>

더 많은 정보가 필요하면 이 도서관을 방문하세요.

레거시 문제로 고민하고 있는 고객의 경우 오류를 발생시키는 행을 찾아 추가합니다.{passive: true}- 예:

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

된다

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

jquery-ui-touch-punch를 사용한 jquery-ui-dragable의 경우 Ivan Rodriguez와 유사하게 수정했지만 터치 무브에 대한 이벤트 오버라이드가 하나 더 추가되었다.

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') });
    }
};

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

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

로.

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

문제를 해결합니다.왜 그가 찬성표를 던지는지 모르겠지만 내겐 효과가 있어.

터치 기반 이벤트 외에도 스크롤 기반 수정을 추가하여 데스크톱과 모바일의 구글 페이지 점수가 표시되지 않도록 할 수 있습니다.

// 패시브이벤트 리스너(플래그 설정 시 약간의 차이)

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.event.special.wheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("wheel", handle, { passive: true });
    }
};
jQuery.event.special.mousewheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("mousewheel", handle, { passive: true });
    }
};

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

최소화 해제 후 추가{passive: true}다음과 같이 1567 회선의 addEventListener 함수로 이동합니다.

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

어떤 것도 깨지지 않고 등대 감사도 듣는 사람에 대해 불평하지 않는다.

나도 같은 문제에 직면했다.그리고 이걸 썼어

<script type="text/javascript" src="https://unpkg.com/default-passive-events"></script>

그리고 당신의 문제가 해결되기를 바랍니다.

언급URL : https://stackoverflow.com/questions/39152877/consider-marking-event-handler-as-passive-to-make-the-page-more-responsive