JavaScript는 대규모 데이터세트를 시각화할 준비가 되어 있나요?

Question

일반적으로 Excel에서 선 그래프 또는 누적 막대 차트로 시각화하는 일부 데이터(10-50개 열, 수십만 행)가 있습니다.
사용자는 개별 샘플을 확인하기 위해 그래프를 확대하거나 축소할 수 있기를 원하지만 이러한 종류의 작업으로 인해 Excel은 실제로 무릎을 꿇게 됩니다.

브라우저에서 시각화를 처리하기 위해 인라인 JavaScript를 사용하여 HTML 페이지에 데이터를 삽입하려고 합니다.flotr JS 차트 작성 lib와 같은 것이 차트에 활용됩니다.

1. 이게 어리석은 생각인가요?
2. 브라우저가 이런 종류의 로드를 처리할 준비가 되어 있나요?
3. 질문하기 전에 좀 더 철저하게 검색했어야 했던 문제가 해결되었나요?

Answer 1

JavaScript 자체가 상당히 빠르기 때문에 JavaScript는 아마도 준비가되었을 것입니다. 내 경험상 브라우저는 일반적으로입니다 ~ 아니다 매우 큰 DOM 구조를 처리 할 준비가되었습니다. 적어도 당신은 왜 상황이 느리다는 것을 알아 내기 위해 많은 시간을 할애 할 수 있습니다. 또한 많은 "표준"JavaScript 라이브러리 (프로토 타입/jQuery가 떠오르는)가 "과도하게"큰 DOM 구조로 작업하는 데 적합하지 않다는 것을 알게 될 것입니다.

주어진 작업이 느리다는 것을 알 수 있습니다. 모두 브라우저이지만 결국 다른 브라우저에서 3-4 가지 다른 이유로 밝혀졌습니다. 이것은 적당히 대형 DOMS와의 작업 경험을 기반으로합니다. 확실히 가능하지만 괜찮은 결과를 얻기 위해 상당한 양의 작업이 소요될 것입니다.

Answer 2

벤치마킹과 최적화를 수행하라는 Adam의 제안을 적극 권장합니다.저는 최근에 Flot을 사용하여 대규모 데이터 세트를 그리는 작업을 수행했는데 Internet Explorer에서 허용 가능한 성능보다 낮은 성능을 경험했습니다(예:차트를 그리는 동안 전체 브라우저가 내 개발자 상자에 약 20초 동안 매달려 있습니다.

플로트는 다음을 사용합니다. canvas Internet Explorer 9 이상에서만 지원되는 차트용 요소입니다.Flot은 다음을 사용하여 이전 버전의 Internet Explorer를 지원합니다. 익스플로러캔버스 도서관.이 라이브러리는 VML, DOM을 통해 VML 요소를 조작하여 그래픽을 그립니다.

사용하여 Internet Explorer 8 스크립트 프로파일러 나는 플롯을 렌더링하는 데 소요되는 대부분의 시간이 네이티브를 호출하는 데 소비된다는 것을 발견했습니다. insertAdjacentHTML 메소드 VML 요소를 생성합니다.네이티브 메서드에 대한 호출 성능을 향상시키기 위해 수행할 수 있는 작업이 없었기 때문에 대신 적절한 성능을 얻기 위해 플롯된 데이터 포인트 수를 줄이는 작업(DOM에서 생성된 VML 요소 감소)에 노력했습니다.

이전 버전의 Internet Explorer에 대한 지원이 필요하지 않거나 관심이 없다면 Flot/Flotr은 대규모 데이터 세트를 처리할 수 있는 능력이 있다는 것을 알아야 합니다.그러나 이러한 버전을 지원해야 하는 경우 대규모 데이터세트를 차트로 작성할 때 성능 문제가 발생할 수 있다는 점에 대비하세요.

Answer 3

Javascript는 대규모 데이터세트를 시각화할 준비가 되어 있나요?

예 - 언어는 적절한 환경에서 중요한 레코드 세트를 쉽게 처리하고 조작하고 시각화하는 등의 수준에 도달했습니다.언어 자체는 괜찮습니다.

이게 어리석은 생각인가요?

아니요, 사실 거의 모든 컴퓨터에서 이 유능한 크로스 플랫폼 언어를 실행할 수 있다고 믿을 수 있습니다.

브라우저가 이런 종류의 로드를 처리할 준비가 되어 있나요?

일부는 실제로 수행하는 처리 및 조치에 따라 달라질 수 있습니다.Chrome이 빠른 자바스크립트 엔진을 사용하고 점점 더 많은 사람들이 이에 크게 의존하면서 자바스크립트 속도 전쟁이 시작됩니다.나는 이것이 완벽하게 유효한 사용 시나리오라고 생각합니다.

벤치마킹과 최적화를 준비해야 합니다. 즉, 자바스크립트의 본질을 파헤쳐야 합니다.부족한 점을 보완할 수 있도록 결과를 공개해 주시기 바랍니다.

-아담