更多的 HTML 属性或值会损害 Angular 的性能吗？

Posted 2023-02-22

【中文标题】更多的 HTML 属性或值会损害 Angular 的性能吗？

【英文标题】：Can more HTML attributes or values hurt Angular performance?

【发布时间】：2017-01-19 01:01:57

【问题描述】：

如果有p这样的：

<p ng-repeat="text in texts">text</p>

向p 添加更多类是否会在渲染 html 时损害 Angular 性能？例如这段代码：

<p ng-repeat="text in texts" class="normal par red small italic">text</p>

如果它引起了性能问题，它真的值得注意吗？

【问题讨论】：

考虑到 Angular 本身 已经有多少包袱，我无法想象仅仅添加一两个属性可能会使它更加变得更糟。

我猜这没什么区别，Angular 只是使用模板中给出的字符串值创建类属性。

您的问题太笼统，无法回答。这取决于。如果您有 1000 个文本并使用一个使用例如的类你可能不想在 IE 中查看它。在你的情况下，添加一个普通的类属性甚至不会触发让角度工作更多的东西。使用像ngClass这样的角度指令并依赖changeDetection，那是另一个故事......

@Mina, Salam,chetori?

【参考方案1】：

首先，您可以在 ng-repeat 中调整的一个方面是唯一键：Angular 会自动将 $$hashKey 属性添加到数组中的每个对象。

您可以添加track by 来提高循环的性能。

那么，如果只是为了添加类，也可以。但是，如果您有大量文本并且您愿意在每个元素上添加指令（例如：ng-click），那么您可能会观察到一些缓慢的渲染。

【参考方案2】：

在您的示例中，类只是一些字符串，仅此而已。 Angular 甚至不需要考虑它。如果有成本，它在浏览器端，它应该编译你的类并分配样式。

因为我可以邀请您添加类的原因，我认为拥有更多类也比分层 CSS 样式更好，因为它需要更少的 DOM 查询和操作。

没关系。但是，基准测试仍然会导致您遇到一些更复杂的问题。那就试试吧。