angularjs - 使用ng-class-odd的效率如何？

Question

是不是更好用

ul li:nth-child(odd){}
ul li:nth-child(even){}

而不是 ng-class-odd 和 ng-class-even ？

也就是说，使用 css 比 javascript 对“ul”列表中的行进行交替着色更有效吗

我的列表有 30-200 行之间的任何地方

Answer 1

TLDR:ng-class-odd/ng-class-even 更好，尽管性能更差并且提供的控制不如 CSS。如果您可以使用 ng-class-odd/ng-class-even，请使用。

关于性能:

原始 CSS 应该总是比 AngularJS 对表达式的评估更快，因为浏览器必须在 DOM 发生变化时评估元素的样式。评估 ng-class-odd/ng-class-even 属性是生成这些计算属性值的额外计算。

在现实世界中:

ng-class-even 和 ul li:nth-child(odd){} 并不完全相同。 ng-class-even 是在 ng-repeat 方面，但使用选择器 ng-class-even 你可以独立于它 -如果愿意，您可以应用更具体的选择器。不想对第一项执行此操作？您将需要 CSS。

这似乎是优雅、性能和控制之间的权衡。

除非您要查看成千上万行，否则性能不是问题，您应该编写人们看起来不错的代码。 当然，我很想在这里看到关于这种极端用例的性能差异的一些硬统计数据!

为了优雅但较少控制和性能，请不要将您的 CSS 绑定(bind)到 ng-repeat 并使用 ng-class-even。

为了性能和控制(但不那么优雅)，使用 CSS 而不是 ng-class-even。