渲染具有500行块浏览器的表组件？

Question

我有一个组件可以将500多个数据渲染到HTML表格行中

渲染和浏览器完成阻塞需要将近3秒。

，因为客户希望它类似于Excel的我不能使用分页，它是一个静态的网站。

有没有办法解决这个问题？例如，在组件呈现之前创建一个加载状态？

Answer 1

我想500+排不适合屏幕（视），所以你需要使用滚动。

有一个名为ember-in-viewport一个插件。它使您能够在不在视口中的情况下渲染组件。

这里是一个sample twiddle。请在您的applicaiton.hbs中更改my-component至my-proxy-component以查看效果。

Answer 2

不要渲染的所有对象一次，只需加载什么是你的视口内可见。已经有不同的Ember插件正在做你需要的东西。

有些插件可以使用：

• Vertical Collection
• Ember Infinity
• Ember Light Table

附：当然你也可以自己创建一个组件/插件，并使用建议的addon @ykaragol ember-in-viewport，但我认为这对你的情况有点矫枉过正。