Angularjs在创建dom元素方面的表现,纯js vs jqlite



我在Angularjs中有一个指令,它将有一个包含许多行(超过1000行)的表,所以我的老板说我不应该使用绑定来使网格内容化(因为angular的绑定限制为2000),相反,我应该动态创建dom元素。

我用angular.element(...)做到了这一点,它很有效。但现在我在想,如果我使用原生jsdocument.createElement,是否可以提高性能?

那么jqlite比纯js慢吗?当生成超过1000行的html时,它会产生多大的影响?

jquery更快吗?比jqlite慢还是相等?

更新:

@Joe Enzminger+1一次绑定,这将有利于报告/打印视图,而这只是视图。但是网格具有内联编辑功能,因此需要双向绑定。它有19列,每个列都有一个输入,最后一列有2个按钮和一个保存按钮。每个按钮具有CCD_ 3,并且保存按钮具有基于行状态来改变其图标的CCD_。所以(19*3)+1个双向绑定。

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

更新2:

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

我相信其中一个是"更快"的。然而,可能只是略微如此——我认为使用其中一种与另一种相比,在性能方面没有太多好处。

然而,从可维护性的角度来看,我建议使用Angular的一次性绑定功能。神话般的"2000绑定限制"实际上适用于$watches,而不是绑定,而且实际上并不是一个限制,而是一个指导原则。在ng repeat内部使用{{::var}}将产生比动态构建自定义DOM更具可维护性和可比较性能的代码,而且它不会创建可能影响性能的$watch。

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

对于DOM渲染,瓶颈不是JavaScript执行速度,而是浏览器重新绘制(请参阅:html5rocks)和reflows(请参阅谷歌开发人员)。无论使用document.createElement还是angular.element都无关紧要,因为在添加或修改页面上的元素时,而不是在内存中创建DOM元素时,会对性能造成影响和UI阻塞。这就是为什么大多数现代UI框架都会批量更新DOM,而不是进行大量微小的更新(例如ReactJS、Meteor、EmberJS)。

对于$watch和$digest性能,性能命中率来自Angular在每个$digest周期中必须评估的绑定表达式(例如{{things}}ng-bindng-showng-class等)的数量和复杂性。如果你记住,在大多数情况下,像点击这样的简单操作会触发$digest循环,那么每次点击都会评估数千个绑定。建议使用一次性绑定来最大限度地减少$watch的数量,并使手表尽可能简单。

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

最新更新