CODEWITHSUNDEEP
performancevue.jsvue-component
Jianwu Chen
Jianwu Chen

Reputation: 6023

Performance issue for VueJS component with huge number of read-only (immutable) objects

I'm developing a VueJS based JSON viewer (http://treedoc.org) with a tree view. The tree item components are recursively generated based on the JSON doc. When the JSON doc is huge with more than 50k nodes. The rendering becomes extremely slow (could take minutes). I debugged with dev performance tool, I noticed the majority time is spending on the VueJS framework method: observe(), observeArray(), to build the reactivity dependencies for the attributes in the tree node. However, those tree nodes are read-only, once parser generated those nodes, the content will never be changed. In that case, it doesn't make sense to redefine those properties and observe their changes. How can I optimize those components to avoid VueJS un-necessary build reactivity deps. i.e. Want to make those data in-reactive.

Upvotes: 2

Views: 2075

Answers (1)

Jianwu Chen
Jianwu Chen

Reputation: 6023

Thanks for the suggestions provided in the comments sections. I summarise those options here:

  1. Use Object.freeze(): That works for me. It dramatically improves performance. The caveat is only can indicate the whole object to be read-only.

  2. Use vue-nonreactive component, this can specific certain attribute nonreactive. The caveat is it depends on Vue internal data structure by overriding _ob_. That will potentially be broken if Vue changes its implementation.

  3. Use vue-static. This looks nice. However, I haven't tried that as I'm using Class-Style-Vue-Components.

Upvotes: 2

Related Questions