Angularjs在创建dom元素时的表现，纯js vs jqlite

Question

我在Angularjs中有一个指令会有一个包含大量行（超过1000）的表，所以我的老板说我不应该使用绑定来制作网格内容（因为有角度的~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~绑定中的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并且所有行都应该是可见的并且不能有分页。

UPDATE2：

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

Answer 1

我确定其中一个更快＆＃34;。然而，可能只是略微如此 - 我不认为使用一个与另一个相比可以获得更多性能。

但是，从可维护性的角度来看，我建议使用Angular的一次性绑定功能。神话般的＆＃34;〜2000绑定限制＆＃34;真的适用于$ watch，而不是绑定，并不像指南那样真正的限制。在ng-repeat中使用{{:: var}}将产生更多可维护的代码，具有可比的性能，而不是动态构建自定义DOM，并且它不会创建可能影响性能的$ watch。

Answer 2

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

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

对于$ watch和$ digest性能，性能影响来自绑定表达式的数量和复杂性（例如{{things}}，ng-bind，ng-show，ng-class等）Angular必须在每个$摘要周期中进行评估。如果您记住，在大多数情况下，像点击这样的简单操作将触发$ digest循环，每次点击都可以评估数千个绑定。建议使用一次性绑定以尽量减少$ watch的数量，并尽可能简化手表。

在默认的ng-repeat指令中（可能是你用来创建一个网格）你除了更喜欢一次性而不是双向绑定之外，你真的无法控制这两个因素。或屠杀您的数据模型。这就是性能敏感的开发人员完全绕过ng-repeat和create their own directives的原因。如果表现对你很重要，你应该考虑做类似的事情。