AngularJS 在渲染大约 2000 个元素时真的很慢吗? [英] AngularJS really slow at rendering with about 2000 elements?

问题描述

这是小提琴:http://jsfiddle.net/D5h7H/7/

它呈现以下内容:

<span>{{group.Name}}</span><div ng-repeat="group.Filters 中的过滤器"><input type="checkbox" ng-model="filter.enabled">{{filter.Name}}<选择 ng-disabled="!filter.enabled"><option ng-repeat="value in filter.Values">{{value}}</option></选择>

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

在 Firefox 中，重新绘制 UI 现在需要大约 2 秒钟.

这个时间可以用于 angular js 吗?有什么我做错的事情导致了 2sec.渲染(因为 2000 个元素对我来说看起来并不大，但 2 秒肯定很大)?

解决方案

在 AngularJS 1.3+ 中，有 一次性绑定 内置:

<块引用>

一次性绑定表达式的主要目的是提供一种方法创建一个取消注册并释放资源一次的绑定结合稳定.减少表达式的数量观看使摘要循环更快，并允许更多信息同时显示.

为了进行一次性绑定，在绑定值前加上:::

{{::name}}

另见相关讨论:

• 渲染值而不绑定数据
• AngularJS 中的数据绑定是如何工作的?
• 真正阻止元素绑定 - 解除绑定元素 - AngularJS

Here's the fiddle: http://jsfiddle.net/D5h7H/7/

It renders the following:

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

It's a list of filters that is loaded in json from the server and then rendered to the user (in an example json is generated right there in Fiddle). At the moment there are 6 groups of 30 filters in each with 15 option elements for each filter.

In Firefox it now takes about 2 seconds to redraw the UI.

Is this time ok for angular js? Is there anything I'm doing wrong that caused 2sec. rendering (cause 2000 elements doesn't look as a big number to me, but 2sec. is certainly big)?

解决方案

In AngularJS 1.3+, there is One-time binding built-in:

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.

In order to make the one-time binding, prepend :: to the binding value:

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

Also see relevant discussions:

• Render value without data-binding
• How does data binding work in AngularJS?
• Genuinely stop a element from binding - unbind an element - AngularJS

这篇关于AngularJS 在渲染大约 2000 个元素时真的很慢吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！