javascript - AngularJS 在渲染大约 2000 个元素时真的很慢吗?

标签 javascript angularjs performance pageload ng-bind

这是 fiddle : http://jsfiddle.net/D5h7H/7/

它呈现以下内容:

<div ng-repeat="group in Model.Groups">
    <span>{{group.Name}}</span>
    <div ng-repeat="filter in group.Filters">
        <input type="checkbox" ng-model="filter.enabled">{{filter.Name}}
        <select ng-disabled="!filter.enabled">
            <option ng-repeat="value in filter.Values">{{value}}</option>
        </select>
    </div>
</div>

它是一个过滤器列表,从服务器以 json 形式加载,然后呈现给用户(在示例中,json 是在 Fiddle 中生成的)。目前有 6 组,每组 30 个过滤器,每个过滤器有 15 个选项元素。

在 Firefox 中,现在重绘 UI 大约需要 2 秒。

这一次对于 Angular js 来说还可以吗?是不是我做错了什么导致了2秒。渲染(因为 2000 个元素对我来说看起来不是一个大数字,但 2 秒肯定很大)?

最佳答案

在 AngularJS 1.3+ 中,有 One-time binding内置:

The main purpose of one-time binding expression is to provide a way to create a binding that gets deregistered and frees up resources once the binding is stabilized. Reducing the number of expressions being watched makes the digest loop faster and allows more information to be displayed at the same time.

为了进行一次性绑定(bind),请将 :: 添加到绑定(bind)值:

<div>{{::name}}</div> 

另请参阅相关讨论:

关于javascript - AngularJS 在渲染大约 2000 个元素时真的很慢吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15183095/

相关文章:

javascript - 为什么Knockoutjs使用 "with"语句和 "new Function"来实现它的bindingProvider?

android - 如何在 Android 上运行的 Web 应用程序中从 CamScanner 或 Office Lens 获取文件?

r - 指定在 doSNOW 集群中加载哪些对象

sql - 游标内的 SQL 更新缓慢

javascript - 基于白名单 ID 数组过滤响应对象

javascript - 当整个应用程序崩溃时如何通知 FxOS 应用程序

javascript - 在客户端使用forgejs加密数据,并使用ruby解密

javascript - Google Sheets 脚本中的循环出错

javascript - 推送复合数组元素

javascript - 使用 Karma 和 Mocha 进行异步测试