QTree and high memory consumption

  • 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 ('')
        .then (response => {
          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?


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

  • 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.

Log in to reply