更新ng-repeat数据时克服UI块

时间:2014-09-10 23:06:44

标签: angularjs

所以是的,显然有可能有长网格,有很多行用角度构建。但随后数据更新出现问题。

你看我是不是全部(让我们说10 000行)并在我的网格中渲染它们 - 这是有效的。最初只需要几秒钟。并且

a)我没有预先确定所有日期 b)我需要网格立即响应。

我可以这样做,让我们在开头只说100行,然后在数据可用时慢慢更新数据。结果证明是问题所在。每次将新行推入$scope.data时 - 它都会阻止UI。所以我需要对这些更新保持警惕。

  • 也许我应该设置一个间隔并且每隔几秒钟更新一次数据? 这似乎无法正常工作
  • 也许我应该以某种方式观察鼠标移动,一旦它停止移动 - 开始/继续添加行,一旦检测到鼠标移动抓住添加行并等待另一次机会? - 如果用户永远不会停止移动鼠标怎么办? (说某种心理)
  • 尝试_.throtle和_.debounce并没有让我到任何地方。

    你们有什么想法吗?

UPD:这是一个疯狂的人:怎么样?而不是等到角度更新DOM,在摘要周期之前(没有数据)在内存中创建整个DOM结构然后插入那个HTML块(那会更快,对吗?)之后让angular做它的魔力,数据应该出现。那会有用吗?

2 个答案:

答案 0 :(得分:0)

即使您可以将所有这些行呈现给DOM,您也会遇到性能问题。而且您的用户可能无论如何都不会滚动10000行。我只想使用分页。 e.g:

<div ng-repeat="item in items | startFrom:currentPage*itemsPerPage | limitTo:itemsPerPage"></div>

如果您真的希望在一个页面上拥有所有内容,则可以在用户滚动时加载行。如果您对该解决方案结帐感兴趣http://binarymuse.github.io/ngInfiniteScroll/

答案 1 :(得分:0)

我注意到的一件事我愚蠢地忽略了 - 容器必须有固定的高度。这显着加快了更新速度。虽然从技术上讲它完全没有解决问题