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/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>

验证列表性能问题

1 个答案: