Question

所以我正在使用一个相当大的JSON对象构建一个大菜单。我最初使用大约250个节点测试它，性能很好。由于这是项目的范围，我把它写完后就完成了。

现在，项目范围要求菜单中有超过3,000个节点。在Chrome中，渲染菜单大约需要3-4秒，这是不可接受的。然后有一个事实是IE8需要得到支持，并且需要几乎整整一分钟来渲染菜单，你就会开始看到我的问题。

现在通常我会在JavaScript中构建一个巨大的DOM字符串，并在完成后应用它，并且需要<1秒来构建相同的DOM。问题是所有菜单项都必须根据复选框进行过滤，这就是首先使用AngularJS的原因，用于菜单项的实时过滤（更不用说使用递归包含的简单渲染），这降低了初始开发时间。

所以现在我很难找到一种方法让Angular快速创建数千个节点，这些节点仍然是数据绑定的，因此可以对它们进行过滤。我已经使用自定义功能来隐藏/显示节点，而不是每次都将它们构建出来，这使得在添加/删除过滤器时菜单变得非常快。现在我只需找到一种方法来克服这个初始渲染驼峰。

以下是菜单本身的标记：

<script type="text/ng-template" id="menu_item_renderer.html">
<div class="menu-item">
    <a ng-show="category.link" href="{{category.link}}" class="menu-item-title" target="{{category.target}}">
        {{category.title}}
    </a>
    <span ng-show="!category.link" class="menu-item-title">
        {{category.title}}
    </span>
    <span class="menu-toggle-btn" ng-show="category.categories" data-ng-class="childrenFiltered(category.categories)"><i class="icon-plus" /></span>
    <span class="menu-item-border" ng-show="!category.categories"></span>
</div>
<ul class="menu-category-list list-unstyled">
    <li data-ng-repeat="category in category.categories" data-ng-class="filterResults(category)" data-ng-include="'menu_item_renderer.html'" class="menu-category"></li>
</ul>

JSON对象很庞大，但我为你们设置了一个JSFiddle，所以你可以看一下渲染时间。请注意，由于应用程序的实现限制，JSON对象位于NG-INIT中。这就是我在实际应用中的情况，这就是为什么我在这里以相同的方式包含它。我知道在标记中放置一个巨大的JSON对象是不好的，在这个项目中没有办法解决它。

http://jsfiddle.net/cy2SW/

我是否可以使用方法/技术来加速菜单的初始显示？

Answer 1

我认为唯一可以解决您的性能问题的方法是只在用户需要时构建您的DOM。您可以在类别旁边添加一个按钮，并将其添加到子列表中的ng-if属性中。

我已经举例说明了如何在现有应用程序中集成它：http://jsfiddle.net/cy2SW/1/。

使用此方法，DOM创建时间大大减少。

加快Angular DOM的创建速度

1 个答案: