performance - vuetify 列表性能问题

Question

我有一个简单的 json 数组，其中包含这样的对象

{
    "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"
    }
}

我在 codrova 项目上使用 vuetify 来渲染列表。该列表由 3 行组成:站、描述和带宽。还有一个简单的组件可以将电台标记为收藏夹。

列表渲染大约需要 5 秒来渲染约 200 个元素。我使用的是有点旧的智能手机:2GB 内存、5.1 Android、~1.2 GHz CPU。

如何提高渲染速度？我尝试在 vuetify 中搜索无限列表，但没有任何内容。

谢谢。

Answer 1

Vue.js 加载起来有点重，但是您可以通过实现无限滚动组件来使用延迟初始化。有一个名为 vue-mugen-scroll 的已实现组件。它还具有 CDN link如果您需要快速测试。

只需将 getStations 方法替换为异步服务器调用即可完成。检查此代码片段以了解其工作原理。

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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e383b2b63233b292b20633d2d3c2122220e7e607c607b" rel="noreferrer noopener nofollow">[email protected]</a>/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>