3

我在 Angularjs 中有一个指令，它将有一个包含很多行（超过 1000 行）的表，所以我的老板说我不应该使用绑定来制作网格内容（因为 Angular 的绑定限制约为 2000），而是我应该动态创建 dom 元素。

我这样做了angular.element(...)，它有效。但是现在我在想如果我使用本机 js 是否可以提高性能document.createElement？

那么jqlite比纯js慢吗？制作超过 1000 行的 html 会产生多大的影响？

jquery 更快吗？更慢或等于 jqlite？

更新 ：

@Joe Enzminger +1 一次绑定，这对报告/打印视图很有用，女巫只是为了查看。但是网格具有内联编辑，因此它需要双向绑定。它有 19 列，每列有一个输入和 2 个按钮，最后一列有一个保存按钮。每个按钮都有ng-show并且保存按钮必须ng-class根据行状态更改其图标。所以 (19*3)+1 双向绑定。

这个网格是一些 kine 的数据输入形式 :D 并且所有行都应该是可见的并且不能有分页。

更新2：

我忘了提到，现在tbody我的模板中有一个空元素，它的所有内容都是作为一个简单的 dom 生成的，并注入其中，绝对没有任何类型的数据绑定。所有的交互都是用好的所有时尚 JS 手动处理的：D。

4

2 回答 2

3

我敢肯定其中之一是“更快”。但是，可能只是略微如此-我认为使用一个与另一个相比，在性能方面没有太多好处。

但是，从可维护性的角度来看，我建议使用 Angular 的一次性绑定功能。神话般的“~2000 绑定限制”确实适用于 $watches，而不是绑定，并且与其说是真正的限制，不如说是指导方针。在 ng-repeat 中使用 {{::var}} 将产生比动态构建自定义 DOM 更可维护的代码，具有相当的性能，并且它不会创建可能影响性能的 $watches。

于 2015-05-13T04:53:32.240 回答
2

这里需要考虑两件事：DOM 渲染性能和角度 $watch($digest) 性能。在这两种情况下，尝试优化document.createElementvsangular.element都是不值得的。

对于 DOM 渲染，瓶颈不是 JavaScript 执行速度，而是浏览器重绘（参见：html5rocks）和重排（参见：Google 开发者）。无论您使用document.createElement还是angular.element无关紧要，因为性能损失和 UI 阻塞是在您添加或修改页面上的元素时出现的，而不是在内存中创建 DOM 元素时。这就是为什么大多数现代 UI 框架会批量更新 DOM，而不是进行大量微小更新（例如 ReactJS、Meteor、EmberJS）。

对于 $watch 和 $digest 性能，性能损失来自Angular 在每个 $digest 循环中必须评估的绑定表达式的数量和复杂性（例如{{things}}, ng-bind, ng-show,等）。ng-class如果您记住，在大多数情况下，像单击这样的简单操作将触发 $digest 循环，每次单击都可以评估数千个绑定。建议使用一次性绑定来最大限度地减少 $watches 的数量并保持 watch 尽可能简单。

在默认ng-repeat指令（大概是您用来创建网格的指令）中，除了尽可能选择一次性绑定而不是双向绑定或破坏您的数据模型之外，您实际上并不能很好地控制这两个考虑因素。这就是性能敏感的开发人员ng-repeat完全绕过并创建自己的指令的原因。如果性能对您来说很关键，您应该考虑做类似的事情。

于 2015-05-13T05:46:34.017 回答