D3 v3은 왼쪽 마우스가 아닌 오른쪽 마우스를 사용하여 줌/드래그 성능을 향상 시켰습니까?

Question

드래그 팬 기능을 처리하기 위해 내장 된 확대/축소 동작을 사용하여 D3 v3 기반 차트가 있습니다. zoom 처리기는 requestAnimationFrame을 사용하여 모든 팬 작업을 업데이트하는 것보다 더 부드럽게 업데이트합니다.

차트에서 많은 데이터를 사용하기 시작했을 때 드래그 중 업데이트의 성능이 왼쪽보다는 오른쪽 마우스 버튼을 사용하는 것이 현저히 우수하다는 것을 알게되었습니다. Chrome DevTools를 파헤 치면 두 작업간에 매우 이상한 차이가 있습니다.

차트를 오른쪽으로 드래그하여 차트를 이동시킬 때 타임 라인보기의 덩어리입니다.

이것은 내가 타임 라인 프레임 업데이트가 상대적으로 정기적 인 그들이 할 수있는 한 빨리 호출되고, 같이 기대하는 것이다. 업데이트를 위해서는 ~ 25ms, 다시 칠하기 위해서는 ~ 60ms. 프레임 당 총 85ms.

왼쪽으로 드래그하면 동일한 차트의 데이터가 정확히 동일한 타임 라인입니다.

각 프레임 한 프레임 업데이트의 끝과 다음의 시작 사이의 큰 시간 간격으로, 훨씬 더 많은 시간 (~ 175ms)를 가지고있다 볼 수 있듯이. 타임 라인에는 가시적 인 처리가 없으며 대부분 0.23ms를 사용하는 selectstart 이벤트 처리기 (나에 의해 추가되지 않은 것, D3 인 것처럼 보임)의 일부 인스턴스 만 있습니다.

내가 그 크롬 작업을 드래그하는 동안 일부 처리의 일부 최적화를 수행하기 전에 본

영향을 미치지 않고, 내가 차트에서 찾을 수있는 모든 다른 이벤트 핸들러를 제거했는지, 그리고 속도의 둔화를 보았다

그 시간 동안 HTTP 트래픽이 있지만 순수 클라이언트 측 업데이트에는 아무 것도 없습니다.

이 것이 알려진 문제입니까? D3는 왼쪽 끌기에 특별한 것을합니까? 이걸 본 사람 있어요?

Answer 1

타이밍 및 성능에 영향을 미치는 기본 처리기가 있습니다.

preventDefault()를 호출하여 비활성화합니다.