2017-11-10 6 views
1

각도 재료를 사용하는 각도 응용 프로그램에서 성능 문제가 있습니다. 경고 : md-select가 MD 탭에있을 때 스크롤 차단 'touchmove'이벤트에 비 수동 이벤트 리스너를 추가했습니다.

나는 (1300 정도) 많은 옵션과 <md-select>이이 <md-select><md-tab> 태그입니다. 페이지로드시 내 페이지가 정지됩니다. https://codepen.io/jjalal/pen/vWxYbv :

[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

당신은 내 문제를 재현 codepen을 찾을 수 있습니다 : 내 JS 콘솔에서 다음 로그를 얻을 수 있기 때문에, 아마 구글 크롬의 이벤트 수동 리스너 때문이다. Harry에서 John으로 전환 할 때 페이지가 멈 춥니 다 (내 애플리케이션에서 더 분명합니다). js 로그를 열고 로그 수준을 '모든 수준'(자세한 수준 활성화)으로 설정하면 3000 개의 로그가 표시됩니다 (각각 1000 개의 옵션으로 3 개가 선택됨).

document.addEventListener('touchmove', function(e) { 
    e.preventDefault(); 
}, { passive: true }); 

을하지만 내 문제가 해결되지 않은 :

나는 this 같은 사실에 수동적 인 이벤트를 설정해야합니다 몇 가지 답변을 보았다.

도움을 주시면 감사하겠습니다.

답변

0

매우 최근에 (2 일 전에) 매우 비슷한 문제가 있었고 몇 시간의 연구 끝에 나는 이것이 가까운 미래에 수정되지 않을 것이라는 것을 깨달아야했습니다. 설명을 위해 this question 및 허용 된 답변을 참조하십시오. 종류-의 솔루션에 관한

(또한 '해결되지 않습니다'태그가있는 angularjs github issue 체크 아웃) :

문제는 브라우저 100 % (할 것입니다조차 IE에서 시도해보십시오. '긴 실행 스크립트'라는 메모가 붙어 있습니다.) 그리고 DOM 렌더링이 아니라 코드에 있습니다. 그래서 계속 시도하고 시도하고 DOM의 작은 부분 (완성 된 컨테이너 div, 버튼, 단락, 찾을 수있는 모든 항목)을 하나씩 제거했습니다. 어느 순간 나는이 문제의 원인을 파악할 수있었습니다. 클릭 가능한 md 아이콘이 포함 된 드래그 가능한 항목이 있었고 그 아이콘에는 마우스를 올려 놓은 md-tooltip이있었습니다. 이제는 충돌 한 3 가지 이벤트 (항목을 드래그하고 버튼을 클릭 한 후 버튼을 마우스로 가리키고 있음)가 있음을 알 수 있습니다. md-tooltip을 제거한 후에 그것은 매력처럼 작동했습니다. 제 제안은 정확히 당신에게 이것이 무엇을 일으킬 수 있는지 식별하기 시작하는 것입니다. 실제 솔루션은 기다려야합니다 ...