javascript - Vuetify 性能问题

Question

我为一个离线 PWA 项目选择了 vuetify，我在其中使用索引数据库和一些显着的大小数据(5k-6k/集合)。从服务器获取它们后，我必须在 vuex 和 idb 之间传输它。
读取和保存它们有点慢(200-300 毫秒)，并且会在短时间内卡住 UI。我虽然在加载时制作全屏加载屏幕有帮助，但它仍然使加载程序结结巴巴。
另外，我在页面之间导航时遇到了一些问题。加载 v-lists(无限加载)和 swiper(滑动 slider )卡住 ui，感觉有点不对劲。特别是当我为按钮添加振动时。卡住会延迟振动 100-200 毫秒，我不知道我是否触摸了按钮。

到目前为止我尝试过的事情:

循环遍历列表元素，并在 vuex 突变处卡住对象(我想保持数组方法的 react 性)。感觉更快，但是克隆数组会延迟初始加载。而且还是不满意。

使用 requestAnimationFrame 解决了导航卡顿，但是延迟了子组件的渲染。似乎也不是最好的解决方案。

使用较少的 dom 元素。我正在为 v-lists 使用无限滚动。尽管它只渲染 15 行，但它仍然加载缓慢。我不能使用虚拟列表，因为列表元素有不同的高度。我没有找到旋转木马/刷卡器
适当的虚拟化。 Vue-awesome-swiper 是最受欢迎的，但加载速度非常慢。

我的应用程序

遗憾的是我不能在这里分享这个项目，但我没有使用任何非凡的代码，这就是为什么我对低性能感到困惑。

在服务工作流程

从服务器获取数据为 JSON -> vuex 操作 -> 提交变异并将数据保存到 idb 使用 Dexie 的 bulkPut -> 变异卡住对象并保存到状态

在可视化

组件使用 mapgetter 从 vuex 获取列表。使用这些 getter，我正在创建计算属性来过滤/重新排序数据(这些方法在 30 毫秒下运行，它们不应该产生问题)。

我找不到任何有用的信息如何让我的应用程序更快。即使向下滚动列表似乎也很慢/滞后。我可以在初始加载时使用 webworker 来处理 IDB，但 UI 动画仍然很慢。我应该使用更少的 v-container/v-layout/v-flex 等...并向我的应用程序添加原生元素吗？目前我只使用 vuetify 元素。

当我在开始时加载所有数据时，我预计初始加载时间肯定会变慢，但之后会平滑导航和快速加载。

Answer 1

我的网站完全基于 Laravel 和 Vuetify 技术。只是一些建议。首先，必须有一个非常快的服务器。在速度方面不是平均的，但速度很快。其次，页面不应该有整页的 Vue 组件。它们首先被安装，然后显示。用户在延迟一段时间后将此视为显示。此外，在显示布局后(mounted Hook 中的 getData 方法)不应通过 API 加载数据。当然，通过 prop {{json_encode($data)}} 加载大量数据会延迟并降低性能。