From b4ec437b6c10e455e057593462e94a97455eb8fd Mon Sep 17 00:00:00 2001 From: Matthew Messinger Date: Tue, 12 Jul 2022 22:32:04 -0400 Subject: [PATCH] Speed up rendering for very large data It does this by not rendering properties that aren't opened. It works best when the data is chunked. The test data has 100 chunks with 100 items each. Without this change, it would take 2000ms to render all 10000 properties. With this change, properties are re-rendered when clicked, which takes 30-50ms, which is a huge improvement. It's not perfect, but it's a huge improvement for viewing large amounts of data with heavily nested properties. --- dev/serve.vue | 12 +++++++++++- src/JsonViewItem.vue | 2 +- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/dev/serve.vue b/dev/serve.vue index ebe5ab9..34d679b 100644 --- a/dev/serve.vue +++ b/dev/serve.vue @@ -32,6 +32,15 @@ import { defineComponent } from 'vue'; import JsonView from '@/JsonView.vue'; + // large chunked data, takes 2s to render all at once. + const largedata: any = {}; + for (let i = 0; i < 100; i++) { + const chunk: any = largedata[i] = [] + for (let j = 0; j < 100; j++) { + chunk.push(j); + } + } + export default defineComponent({ name : 'ServeDev', components: { JsonView }, @@ -64,7 +73,8 @@ ], object : { working: 'properly' - } + }, + largedata }; }, colorScheme(): string { diff --git a/src/JsonViewItem.vue b/src/JsonViewItem.vue index 0fb0ef9..7ec6d43 100644 --- a/src/JsonViewItem.vue +++ b/src/JsonViewItem.vue @@ -16,7 +16,7 @@ v-for="child in data.children" :key="getKey(child)" :data="child" - v-show="open" + v-if="open" :maxDepth="maxDepth" :canSelect="canSelect" />