vuetify list perfomance issue

Question

I have a simple json array which consist of object like this

{
    "kb:esid": "779256bf333d2d11abb52e39aafff20d",
    "kb:station": "Disco935 New York's Jammer",
    "kb:description": "Playing The 70's 80's 90's Disco And Beyond",
    "kb:station_url_record": {
        "kb:url_no": "1",
        "kb:url": "http://localhost/stream",
        "kb:status_code": "A",
        "kb:bandwidth_kbps": "128",
        "kb:url_strength": "9"
    }
}

I use vuetify on codrova project to render list. The list consist of 3 lines: station, description and bandwidth. There is also a simple component to mark a station as a favourite.

The list rendering takes about 5 seconds to render ~200 elements. I'm using a bit old smartphone: 2GB memory, 5.1 Android, ~1.2 GHz CPU.

How can I increase the render speed? I tried to search infinity list in vuetify but there is nothing about it.

Thanks.

You could make your own infinity scroll. You would render 20 or so items then watch a scroll event and see if they are near the bottom of the list. If yes, then render some more items. There is still the problem when the user reaches the bottom of the list, you'll have 200+ items rendered which may slow down scrolling/interaction performance. I think the cleaner solution is to paginate the results so you are only displaying 20 items at a time and the user cycles through each set. You can do this by using the `v-pagination` component. Also the `v-data-table` has pagination build in — LLai, Jan 24 '19 at 02:59
You can attach chrome devtools to the app and check the performance. Maybe [this question and answers](https://stackoverflow.com/questions/21332853/is-there-a-real-solution-to-debug-cordova-apps) can help — ljubadr, Jan 24 '19 at 03:23
If you don't want to debug the performance, you could try virtual scroll libraries. [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller), [vue-virtual-scroll-list](https://github.com/tangbc/vue-virtual-scroll-list), or any other virutal scroll library. Even if the list has 10000 elements, those libraries will only render what's visible on the page — ljubadr, Jan 24 '19 at 04:23
@ljubadr vue-virtual-scroll-list just doesn't work properly. I see empty space after scrolling to the bottom, then the library renders items again. vue-virtual-scroller doesn't support vuetify components within scroller — Alexey Sh., Jan 26 '19 at 06:44
On vuetify home page there is **get help** that will take you to discord chat, maybe someone there would know more. Or you can render the list in browser, inspect the elements and pick up the generated html. Then use that instead of vuetify components and add your logic. You get the same layout, but you need to add logic yourself. Your layout sounds simple enough for this — ljubadr, Jan 26 '19 at 07:43

score 2 · Answer 1 · answered Jan 24 '19 at 06:35

Vue.js is a little bit heavy to load however you can use lazy initialization by implementing an infinite scroll component. There is an implemented component called vue-mugen-scroll. It also has a CDN link if you need a quick test.

Just replace getStations method with your asynchronous server call and it is done. Check this snippet to see how it works.

let vm = new Vue({
  el: '#vue-instance',
  data: {
    stations: [],
    loading: false,
  },
  created() {
    this.getStations();
  },
  methods: {
    getStations() {
      for (let i = 0; i < 16; i++) {
        const count = this.stations.length + i;
        this.stations.push({
          esid: '779256bf333d2d11abb52e39aafff20d' + count,
          name: 'Station ' + count,
          description: 'Station Description ' + count,
          record: 'Station Record ' + count,
        });
      }
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-mugen-scroll@0.2.5/dist/vue-mugen-scroll.min.js"></script>
<div id="vue-instance" class="container">
  <div class="row">
    <div class="col-sm-6" v-for="(station, index) in stations">
      <div class="card m-4" style="width: 18rem;">
        <div class="card-body">
          <h3 class="card-title">{{ station.name }}</h3>
          <p>{{ station.esid }}</p>
          <p>{{ station.description }}</p>
          <p>{{ station.record }}</p>
        </div>
      </div>
    </div>
  </div>
  <mugen-scroll :handler="getStations" :should-handle="!loading">
    loading...
  </mugen-scroll>
</div>

vuetify list perfomance issue

1 Answers1