如何在大小超过2gb的前端渲染json

Question

GET call /giveMyTree is giving a Json, more than 2 gb in size.In frontend side we are parsing that json and processing on entire json and displaying the data json contains.

Json structure is in nested structure.

{

tree[1]

|_ O{0}

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

     .                         :
     .                         :

}

we display 1000 node, 10000 link and other data after parsing whole json.

I am unable to display this data on browser, browser is either crashing or hangs while processing this data.Is there any way where I can load this data to browser and display the graph to end user.

Answer 1

With the API you designed, there isn't. The browser will have to load the JSON to parse it, and 2 GB of JSON will create more than 2 GB of JS objects in memory, give or take.

Even a 4K display can at most show up to 32 MB of data at once (4K*2K*4 = 32M), and if you have mostly text, far less than that, so you don't need 1 GB of data in a single transmission.

Current browsers have problems parsing some hundred megabytes of JSON, so you will have to change your API in such a way that there are smaller chunks transmitted at a time - you should get every JSON answer down to less than 20 MB in size, either by removing details from the general tree (and fetching them when the user opens a single entry), or by breaking the full tree into smaller chunks (only load the root node and all subnodes, and when a subnode is expanded, fetch the sub-subnodes).