dygraphs 그래프의 메모리 사용량을 줄이는 방법

Question

저는 dygraphs를 사용하여 개발중인 웹 거래 플랫폼에서 캔버스 기반의 주식형 차트를 생성하고 있습니다 - source here. 데이터는 WebSocket 연결을 통해 웹 클라이언트에 전달됩니다.

소스를 보면 배열 (chartData)의 데이터가 소켓을 통해 들어오고 (줄 100) 차트에 데이터가 추가되고있는 것을 볼 수 있습니다. dygraphs 차트는 updateOptions (줄 111)를 통해 차트를 표시하므로 최신 데이터를 사용하여 차트가 다시 그려집니다.

잘 작동하며 성능이 좋습니다. 그러나 약 1 시간 후에 10,000 개의 데이터 항목이 차트에 추가되면 Chrome 사용중인 페이지가 메모리 사용으로 인해 충돌합니다. 데이터는 차트와 배열 (chartData)에 모두 저장되므로 하나의 웹 페이지에 대한 메모리 덩어리라고 생각합니다. 게다가, 나는 돼지 인 ExtJS를 사용하고있다.

차트의 메모리 사용량을 줄이는 방법에 대한 제안이있는 사람이 있습니까?

Answer 1

"Ext를 사용하지 말 것"이외에 여러 가지 추측을 할 수 있지만 확실한 것은 없습니다.

사용중인 데이터의 대부분이 현재 차트에서 볼 수있는 부분에 없으면 간단히 제거 할 수 있습니다. 차트를 채울 수있는 충분한 데이터가 확보되면 n 레코드를 끝에 추가 할 때마다 처음부터 n 레코드를 연결 해제합니다.

데이터를 편안하게 렌더링 할 수 있지만 (가능하지는 않지만 가능할 수도 있음) 여러 이미지를 서로 바꿔 넣으십시오. 데이터를 그룹으로 수집하십시오. 특정 간격으로 해당 그룹을 렌더링 영역에 복제하고이를 사용하여 새 차트를 렌더링합니다. 렌더링이 완료되면 DOM에 배치하고 이전을 버립니다.

그러나 단순히 내선 없애 특히 ...

을하여 많은 문제를 해결할 수있는 오래된 데이터를 제거하는 단계를 포함한다.