vuetify 列表性能问题答案

【问题标题】：vuetify list perfomance issuevuetify 列表性能问题
【发布时间】：2019-06-17 16:45:47
【问题描述】：

我有一个简单的 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 中搜索无穷大列表，但没有任何内容。

谢谢。

【问题讨论】：

您可以制作自己的无限卷轴。您将渲染 20 个左右的项目，然后观看滚动事件并查看它们是否在列表底部附近。如果是，则渲染更多项目。当用户到达列表底部时仍然存在问题，您将呈现 200 多个项目，这可能会降低滚动/交互性能。我认为更简洁的解决方案是对结果进行分页，这样您一次只显示 20 个项目，并且用户循环浏览每组。您可以通过使用v-pagination 组件来做到这一点。 v-data-table 也内置了分页
您可以将chrome devtools附加到应用程序并检查性能。也许this question and answers 可以提供帮助
如果不想调试性能，可以试试虚拟滚动库。 vue-virtual-scroller、vue-virtual-scroll-list 或任何其他虚拟滚动库。即使列表有 10000 个元素，这些库也只会呈现页面上可见的内容
@ljubadr vue-virtual-scroll-list 无法正常工作。滚动到底部后我看到空白空间，然后库再次呈现项目。 vue-virtual-scroller 不支持滚动器中的 vuetify 组件
在 vuetify 主页上有 get help 会带你去 discord 聊天，也许那里的人会知道更多。或者您可以在浏览器中呈现列表，检查元素并获取生成的 html。然后使用它代替 vuetify 组件并添加您的逻辑。你得到相同的布局，但你需要自己添加逻辑。你的布局听起来很简单

标签： performance cordova vue.js vuetify.js

【解决方案1】：

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

只需将getStations 方法替换为您的异步服务器调用即可。检查这个 sn-p 看看它是如何工作的。

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>

【讨论】：