分解CollectionView渲染以避免阻塞UI线程

Jas*_*ill 5 ember.js

我想改变更新的呈现计划CollectionView(由创建者{{each}}),以便大插入不会长时间阻止UI线程.理想情况下,我想在50毫秒内渲染尽可能多的元素,然后将控制权传递回UI线程并设置超时以继续进一步渲染.看起来Ember中有一些工具用于实现自定义渲染缓冲区行为,但我不知道从哪里开始使用它.

这是一个jsfiddle基准测试,显示将500个元素插入到阻止UI线程一段时间的列表中:

http://jsfiddle.net/Ecq8g/6/

Rya*_*yan 2

我想找到一种更好的方法来做到这一点,但现在我正在延迟填充 ArrayController 内容的速度。这是一个非常肮脏的例子。

\n\n

http://jsfiddle.net/BsjSH/1/

\n\n
for (var i = 0; i <= 999; i++) {\n    Ember.run.later(function() {\n        App.ArrayController.pushObject(App.Thing.create());\n    }, i * 3);    \n}\xe2\x80\x8b\n
Run Code Online (Sandbox Code Playgroud)\n\n

您可以通过仅维护视口中的项目内容列表来改进这一点。我喜欢你的想法,即挂钩 CollectionView\'s itemViewClass 的渲染函数,并且只允许渲染一定数量的视图。

\n