AngularJS渲染部分阻止其他模板的下载吗？

Question

所以我在Internet Explorer上遇到了一个问题（适用于所有其他浏览器），这似乎是一个指令的HTML从服务器上检索需要20多秒。页面设置如下：

<div class="groups-page">
    ...
    <test-directive></test-directive>
    <div class="groups">
        <h1 ng-repeat="x in records">{{x}}</h1>
    </div>
    ...
</div>

记录是包含大约5000个项目的数组。查看网络选项卡，组页面HTML将在几毫秒内加载。现在我们有5000条记录，我假设它需要花费很多时间来渲染。因此，我看到测试指令HTML就位于网络选项卡中，最后是＆＃34;下载＆＃34; 20秒后我是否正确地说我需要限制这里的数据绑定量以及导致测试指令HTML花费这么长时间下载的原因是什么？如果我在ng-repeat上设置了limitTo，那么限制它就会越快。

Answer 1

问题很可能是由于Angular必须做的大量工作才能生成并绑定5,000份模板。您将在浏览器中看到的是您的客户端下载数据，然后在加载数据后，它会挂起一段时间，同时生成必要的HTML以添加到DOM。完成后，页面将再次响应，并在屏幕上绘制元素。在非常大量的数据中，您的浏览器开始变慢，即使在绘制后也会跟踪它所跟踪的DOM元素的数量。

您可以使用多种方法来缓解此问题，包括：

1. 减少模板中数据绑定的数量
2. 选择您的数据，以便您不会一次显示这么多数据
3. 使用“无限滚动”（滚动时将项目添加到DOM时性能会变差）
4. 查看为列表实现虚拟滚动（实质上是DOM只渲染实际结果的一部分，在滚动时移动）。

我自己遇到了同样的问题，最终选择了4个选项。这可能是上述选项中最多的工作，但解决方案是非常顺利地处理20万个项目。如果您不想创建自己的虚拟滚动，那么现在有一些开源实现值得研究。