javascript - 如何在 ng-repeat 中使指令渲染更快

Question

我有很多项目要加载。

所以我放弃了ng-repeat。在此之下，我使用一个指令。因此指令应该加载到每个项目上。

这里，完成ng-repeat中的所有项目后加载基本 View 需要一些时间。

所以，我需要逐个查看(渲染)单个项目。实际上， View 不应该等待完整的 ng-repeat。

<div ng-repeat="site in siteList>
<stock-chart graph-site="site" graph-params="graphParams" ></stock-chart>
</div>

在这里，我有 graphParams 和 graphSite 的观察者。

我们如何为此编写代码？

Answer 1

没有办法加快渲染速度，但您可以采取一些技巧来提高 UI 的响应速度:

• 使用自定义过滤器来确定用户何时位于 View 底部 并从原始数组中渲染更多值。
• 使用“track by”表达式来避免额外渲染。

这是一个为您提供的实例:

https://plnkr.co/edit/onSjuQL8aB3iXGBamP28?p=preview

跟踪方式:

<div ng-repeat="site in siteList | scrollFilter:this:100 track by site.id">

过滤器:

app.filter('scrollFilter', function() {
  var bottomScrolledCount = 1,
      scope = null;
  window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
      if (scope) {
        scope.$apply(function() {
          bottomScrolledCount++;
        })
      }
    }
  };
  return function(values, fscope, length) {
    scope = fscope;
    var filterResult = [];
    for (i = 0, len = Math.min(values.length, length * bottomScrolledCount); i < len; i++) {
      filterResult.push(values[i]);
    }
    console.log(filterResult.length);
    return filterResult
  }
})

核心思想是将渲染项限制传递给过滤器，并使用 window.onscroll 事件检查页面是否滚动到底部。由于按表达式进行跟踪，因此不会花费更多时间来渲染旧项目。只有新的才会添加到 View 中。

此外，您需要将范围传递给过滤器才能使用 $apply 方法。