Javascript 如何在ng repeat中加快指令渲染

我有很多东西要装

因此，我不得不放弃

ng repeat

。在此情况下，我使用一个指令。所以指令应该加载到每个项目上

在这里，在完成

ng repeat

中的所有项目后，加载基本视图需要时间

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

因此，我需要逐个项目查看（渲染）。实际上，视图不应该等待完成

ng repeat

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

---

没有办法加快渲染速度，但您可以使用几种技巧来提高UI的响应速度：


使用自定义过滤器确定用户何时处于视图底部
并从原始数组中渲染更多值
使用“跟踪方式”表达式可避免额外渲染

下面是一个活生生的例子：


追踪者：

<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
  }
})

app.filter（'scrollFilter'，function（）{
var bottomScrolledCount=1，
scope=null；
window.onscroll=功能（ev）{
if（（window.innerHeight+window.scrollY）>=document.body.offsetHeight）{
如果（范围）{
作用域$apply（函数（）{
bottomScrolledCount++；
})
}
}
};
返回函数（值、范围、长度）{
范围=范围；
var filterResult=[]；
对于（i=0，len=Math.min（values.length，length*bottomScrolledCount）；i

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

另外，为了使用$apply方法，您需要将作用域传递给过滤器。
您希望以渐进的方式显示它。对吧？是的。渲染单个项目需要更多的时间。您可以使用一些CSS转换和不透明度动画，并尝试在这些重复的
div
上使用该类，我知道这不会对性能产生任何影响，但会改善UI影响。