많은 작은 막대 그래프 (스파크 라인 크기)를 요구하는 디자인이 있습니다. 전형적인 페이지는 그래프 당 100 개 이상의 데이터 포인트를 보여주는 60 개 이상의 그래프를 쉽게 가질 수 있습니다. 브라우저 안의 메모리가 엄청나게 엄청날 것 같습니까? 또한 png를 출력하는 서버 측 렌더러를 사용할 수도 있지만 SVG를 사용하면 더 많은 작업을 수행 할 수 있습니다.복잡한 페이지에 대한 SVG 메모리 풋 프린트
기타 고려 사항 : Rapheal.js가 SVG를 IE 용 VML로 변환 할 가능성이 높습니다. 따라서 저기간의 메모리 공간은 합리적이어야합니다.
좋은 답변을 찾는 데 도움이되는 방법이나 방법에 대해 감사드립니다.
설명하는 svg 요소의 양은 확실히 메모리 소비면에서 문제가 될 수 있습니다.
캔버스 요소와 달리 SVG는 브라우저가 표시된 모든 요소에 대한 개체 모델을 유지 관리해야합니다. 이 객체 모델을 사용하면 특정 요소를 클릭하여 이벤트를 쉽게 연결할 수 있습니다. 사각형이 화면 상에있는 곳, 크기, 크기 등을 추적 할 필요가 없습니다. 그러나 이것은 메모리 요구 사항으로 인해 발생하며 캔버스 태그와는 상당히 대조적입니다. 픽셀을 칠하는 색에 대해, 그리고 "개체"가 클릭 된 것을 추적하는 것에 대해 걱정해야합니다.
따라서 성능이 문제가되는지 알아 내려고 할 때 대상 하드웨어 측면에서 볼 때 최저 공통 분모로 시작하는 것이 좋습니다. 휴대 기기를 타겟팅하고 있습니까? 랩톱 및 데스크톱을 대상으로합니까?
이 질문에 대한 답변을 얻은 후에 더미 그래프 하나 (100 데이터 포인트)를 60 번 이상 사용하는 해당 하드웨어를 대상으로하는 더미 응용 프로그램을 빌드하십시오. 사용자가 상호 작용하는 방식을 반영하는 방식으로 디스플레이와 상호 작용할 수 있도록 충분히 구축하십시오 (사용자가 그래프를 슬라이드하거나 포함해야하는지 등을 포함하려는 경우)
기본 상호 작용을 사용하고 성능이 요구 사항 (즉, 응용 프로그램 잠재 고객의 기대치)을 충족시키는 지 확인하십시오.
이러한 특성의 응용 프로그램 성능 향상 측면에서 아약스와 svg의 조합 나는 그래프의 썸네일 (SVG를 사용하면 디테일을 줄임으로써 훨씬 작은 발자국이 될 것임)을 생성 할 것이고, 사용자가 세부 사항을 결정할 때, 아약스를 사용하여 특정 SVG 표현을 좀 더 자세하게 볼 수있다. 그래프.
앱을 :) 구축 즐길 수감사합니다. 사려 깊은 대답. 나는 실제로 그것을 시도하는 것을 대체 할 수있는 것이 없다는 것을 알고 있지만 다이빙을하기 전에 온전한 체크를하는 것이 좋습니다. – Matt
PNG 파일은 독립의 SVG의 스파크를 위해 사용하고 필요에 따라 SVG를 아래로 당기는 사랑 아담의 생각. 이것들은 librsvg 또는 Cairo과 같은 라이브러리에 공급 된 동일한 SVG 소스를 사용하여 서버 측에서 쉽게 렌더링 될 수 있습니다.
jQuery Sparklines 라이브러리를 살펴보면 캔버스를 사용하는 무언가 (IE의 자동 해결 방법 포함)를 찾고 있는데, 필요한 모든 것을 이미 수행했을 수도 있습니다.
데이터를 표준화하는 것이 중요합니다. 대부분의 경우 50px 폭의 스파크 라인에서 100 개의 데이터 포인트가 필요하거나 눈에 띄지 않습니다. 데이터 정규화를 사용하면 100 포인트에서 5 포인트로 줄일 수 있습니다. 이는 눈이 더 쉬우 며 성능이 향상됩니다.
서버 쪽 스파크 라인 이미지 스프라이트는 많은 수의 프런트 엔드 SVG/Canvas에서 생성 된 스파크 라인보다 성능이 우수합니다.
이 다른 사람이 "금지"때문에 대답하기 정말 테스트하기가 쉽고, 어렵다은 다음과 같습니다
여기에 우수한 PNG 압축을 사용하여 자바에서 빠르고 서버 측 스파크 솔루션입니다 주걱. 나는 당신이 빠른 테스트 케이스를 만들어 내고 그것이 당신의 필요를 충족시키는 지 아닌지 결정할 것을 제안한다. – Phrogz
이 질문에 몇 가지 문제가 있습니다. 첫째, 메모리 사용량은 사용중인 브라우저에 따라 다릅니다. 그것은 또한 플롯을 생성하는 데 사용되는 자바 스크립트 메모리 구조의 복잡성에 달려 있습니다. 두 번째로, Raphael은 SVG를 VML로 변환하지 않고, 벡터 그래픽을 렌더링하는 일련의 명령을 취해 DOM 내부의 그래픽을 SVG 또는 VML로 구조화합니다. 아마도 당신이 원하는 것은 단일 페이지에 60 개의 스파크 라인을 생성하고 관심있는 브라우저의 메모리 소비를 관찰하는 샘플 페이지를 만드는 것입니다. PNG보다 거의 확실합니다. – Pridkett
+1하기 만하면됩니다. 또한 VML을 대상으로하는 것과는 달리 SVG를 기본적으로 지원하지 않는 브라우저에서 SVG를 렌더링하는 방법으로 svg-web 라이브러리를 살펴 보는 것이 좋습니다. http://code.google.com/p/svgweb/ – jbeard4