QTree and high memory consumption

[titan83]

Hello, colleagues.
At first I want to thank author for his very intersting product.
I’m a very newbie in JS world, so, may be, my question will be stupid, but still…
I just tried Quasar and very like it.
I use QTree for loading data from database, my dataset is 2 levels of deep and ~8500 items (7-10 on root level and all others on second). Uncompressed text json size is 1Mb.
But when I’m loading this dataset into QTree first time my firefox instance “eat” ~450Mb (mo so small). Also I noticed that when I refreshed page (F5) memory consumprion is twice do not fall, this is very unpleasant and dangerous, especially on mobile devices.
So my code for loading data is:

loadJobList () {
  this.$http.get ('http://127.0.0.1:8000/api/jobs')
    .then (response => {
      console.log(response.data)
      this.treeModel = response.data
    })
},

I called this function from “created” section.

And small example of source data:

{“title”:“Environmental”,“expanded”:false,“children”:[{“CreatedTm”:“2016-12-23T06:46:00.000Z”,“Reference”:"",“JobCode”:28658,“JobType”:1,“LockId”:0,“title”:“SERGEY”},{“CreatedTm”:“2015-10-14T00:23:00.000Z”,“Reference”:"",“JobCode”:28648,“JobType”:1,“LockId”:0,“title”:“CA06”},{“CreatedTm”:“2015-10-13T23:27:00.000Z”,“Reference”:"",“JobCode”:28647,“JobType”:1,“LockId”:0,“title”:“CA05”},{“CreatedTm”:“2015-10-13T23:21:00.000Z”,“Reference”:"",“JobCode”:28646,“JobType”:1,“LockId”:0,“title”:“CA11”},{“CreatedTm”:“2015-10-12T20:08:00.000Z”,“Reference”:“Mina X”,“JobCode”:28645,“JobType”:1,“LockId”:0,“title”:“CA10”},{“CreatedTm”:“2015-10-12T19:06:00.000Z”,“Reference”:“Mina Pibe”,“JobCode”:28644,“JobType”:1,“LockId”:0,“title”:“CA09”},{“CreatedTm”:“2015-10-07T11:18:00.000Z”,“Reference”:"",“JobCode”:28656,“JobType”:1,“LockId”:0,“title”:“LABMON”},{“CreatedTm”:“2015-10-23T23:34:00.000Z”,“Reference”:“S-27/09/15”,“JobCode”:28654,“JobType”:0,“LockId”:null,“title”:“0004-OCT15”},

So my question: how to reduce memory consumption?

Thanks.

[benoitranque]

you should use async tree. Don’t load all the data at once, load it when the parent node is clicked

[titan83]

Thanks for your reply.
I thought about lazy loading, but, unfortunately, this method don’t solve main problem: memory still allocate when user open several leafs.
Also I tested my dataset with vue-tree, results are interest: memory ~250Mb for 8500 records and (that’s most important) don’t grow memory allocation when I press “Refresh” in browser.
My question was about other surface: how can 1Mb source json text can be parsed in ~300Mb object? Reactive setters\getters for each property? Or something other?
I don’t talk about C++ now, but event NodeJS parse Json much more economy.
Thanks again.