프론트 엔드 쪽에서 json을 렌더링하는 방법

GET call/giveMyTree는 크기가 2GB가 넘는 Json을 제공합니다. 프론트 엔드 쪽에서 우리는 json을 파싱하고 json 전체를 처리하고 json에 포함 된 데이터를 표시합니다. .프론트 엔드 쪽에서 json을 렌더링하는 방법

Json 구조는 중첩 구조입니다.

{

트리 [1]

| _ O {0}

|_ branch[50] 
    |__ 
    | Point[1000] 
    |  |___ branch {225} 
    |    : 
    |    : 
    |___ Line[10000] 
    :  |____start{1} 
    :  |   | 
    :  |   __ branch{122} 
    .  |     : 
    .  |     : 
      |____end{1} 
         | ..... 

    .       : 
    .       :

}까지 1,000 노드 10000 링크 및 전체 JSON 파싱 후 다른 데이터를 표시

이 데이터를 브라우저에서 표시 할 수 없습니다.이 데이터를 처리하는 동안 브라우저가 다운되거나 멈 춥니 다.이 데이터를 브라우저에로드하고 최종 사용자에게 그래프를 표시 할 수있는 방법이 있습니다.

출처

2016-06-18 omee

이렇게 많은 양의 클라이언트 측 데이터는 매우 나쁩니다. 사용자 요청에 따라 더 많은 데이터를 가져올 수있는 일종의 페이지 매김 기능이 페이지에 포함되어야합니다. [유사한 SO 게시물] (http://stackoverflow.com/questions/19596403/best-way-to-handle-graphing-and-display-of-large-data-sets)을 확인하십시오. – Abhishek

당신이 디자인 한 API를 사용하지 않습니다. 브라우저는 구문 분석을 위해 JSON을로드해야하고, 2GB의 JSON은 메모리에 2GB 이상의 JS 객체를 생성하거나 가져옵니다.

4K 디스플레이조차도 한 번에 최대 32MB의 데이터를 표시 할 수 있으며 (4K * 2K * 4 = 32M) 텍스트가 대부분 텍스트보다 작기 때문에 1GB가 필요하지 않습니다 단일 전송으로 데이터를 전송할 수 있습니다.

현재 브라우저는 JSON이 수백 메가 바이트로 파싱되는 데 문제가 있으므로 한 번에 전송되는 작은 청크가있는 방식으로 API를 변경해야합니다. 모든 JSON 응답을 20MB 미만으로 줄여야합니다. 일반 트리에서 세부 사항을 제거하고 (사용자가 단일 항목을 열 때 항목을 가져 오는) 전체 트리를 더 작은 청크로 분할하여 (루트 노드와 모든 하위 노드 만로드하고 하위 노드가 확장되면 페치 서브 - 서브 노드).

출처

2016-06-18 10:26:13 Alexander

감사합니다 알렉산더. 접근 방법은 "루트 노드와 모든 하위 노드 만로드하고 하위 노드가 확장되면 하위 하위 노드 가져 오기"를 제안합니다. – omee

이 접근 방식을 앞쪽에 구현할 수 있습니까? JSON 객체에 브라우저 전체를로드하고 JSON 객체에 저장하는 것과 같이 [여기서 브라우저는 호스트 머신 램을 사용하므로 json 객체 저장 용량은 호스트 시스템의 메모리 제한에 달려 있습니다.] 사용자가 노드를 클릭하면 UI에서만 해당 노드를 표시하고 표시합니다. – omee

시도해 볼 수는 있지만 브라우저가 충돌하는 컴퓨터의 90 %가 예상됩니다. – Alexander

프론트 엔드 쪽에서 json을 렌더링하는 방법

답변

관련 문제