浏览器冻结4-5秒，直到Vue组件完成加载

Question

我有一个Vue组件：task.vue生成一个任务列表，epic.vue组件是task.vue的父组件，因此每个epic.vue生成它来自task.vue的任务列表。 问题是，当我重新加载页面时，浏览器会冻结4-5秒，直到task.vue组件完全呈现。

每次我重新加载页面时，我都有一个从api函数中获取所有数据的ajax。它返回一个包含epics（文件夹中的文件夹）的嵌套数组，每个数组都有自己的一组任务。它确实是一个很大的阵列，可能包含1000多条记录。

有没有办法在task.vue组件加载时修复浏览器的冻结？

在我的epic.vue中，我只是将prop传递给task.vue组件，其中包含当前史诗所具有的所有任务。

我的数组结构和vue渲染完全类似于：https://vuejs.org/examples/tree-view.html。

Answer 1

如果加载时间与您正在加载的记录数量直接相关，那么您可以考虑加载一个初始块（例如100左右）以允许快速渲染，然后立即延迟加载其余部分或者在相同大小的块中需要。