基于vue+elementui技术栈下，某个页面加载一个再普通不过的table，发现总是loading在十几秒之后才能渲染出table，甚至还会卡死。

众所周知。。我目前做了很多toB的业务。。都没有遇到过这种基础的table卡顿，页面白屏问题，那么是为什么呢。。

平平无奇的table如下图：

一开始我还以为是接口请求时间过长之后超时的问题，因为从network来看，loading时确实是没有拿到返回值，接口出参呈现failed状态，但是又检查了timing，发现实际接口请求时间在1.3s左右，然后开始分步注释页面渲染的div（table操作栏里有较复杂的drawer组件），直到把这一部分注释掉，整个页面都通畅了。。

所以问题就出现在这个table里面有一列为选择器，由用户绑定客服，之后在操作栏提交。继而定位到原因是option绑定的array条数过多（4000条）导致的，虽然table做了分页每页只渲染10条但是在每条渲染时都要重新渲染一遍这个array，导致dom渲染过多卡死。

因此思路改为：

1、 在create生命周期中用js对初始数组进行过滤，得到一个新的初始数组newArray与每条数据绑定，此时初始化页面的时候select-option只有1条数据，做显示用。

2、之后用延时函数or在其他页面交互上绑定真实select-option的array渲染。

其实4000条数据的下拉框不管怎么样点击都会有些许视觉上的卡顿，而且即使加了模糊搜索，这么大量的数据做成select意义已经不大了，在设置页面搜索项之前应该对数据体量有大体的预估，然后从技术角度给产品提出更好的交互建议是真的。