使用 router-outlet 和 ngIf 之间是否存在性能差异

Question

想象一下，我正在使用 ngIf 来呈现（或创建）一个组件，并且我正在基于 ngIf（或 ngSwitch）的组件之间切换。无论模式问题如何（尽管我认为在组件之间切换时使用路由器是一种更好的模式），在性能方面，如果我使用路由器插座而不是 ngIf 块（反之亦然）会有任何性能提升吗？

可视化

使用 ngIf

<ng-container *ngIf="condition === a">
   <a-component></a-component>
</ng-container>
<ng-container *ngIf="condition === b">
   <b-component></b-component>
</ng-container>

使用路由器插座

<router-outlet></router-outlet>

Answer 1

这取决于组件，在任何一种情况下（路由器出口或 ngIf），组件都会被创建和销毁。

如果您的组件很重，那么过于频繁地在组件之间切换可能会导致性能问题。

顺便说一句 heavy 我的意思是 javascript 内存消耗和 DOM 重绘。

只要确保没有内存泄漏，就可以避免内存问题，但是如果频繁更改 DOM，则无法避免 DOM 重绘，则会出现性能问题。

避免 DOM 重绘的一种解决方案是使用 hidden 而不是 ngIf。

Answer 2

有趣的问题，我已经使用 Angular 将近一年了，这是我的看法：

选择哪个以及为什么：

• 我认为这只是你试图隐藏和显示的元素有多大的问题，如果它是用于包含一些内容或卡片的容器，*ngIf 更有意义，如果它是一个带有通过它运行的多个元素和功能，可能有子组件，使用 Angular 的路由更有意义，主要是因为上面提到的结构差异，Angular 路由在您的应用程序中很好地组织了您的组件。对大型组件使用 *ngIf 总是会很混乱。

有性能差异吗？：

• 这取决于您使用的路由方法，默认情况下，角度会立即加载所有组件，这样可能会产生性能差异。但是，如果您使用他们的延迟加载路由方法来加载您的组件，则在您的命令调用包含它们的模块之前，不会加载组件，在这种情况下，它们之间不会有性能差异。

在此处查看延迟加载文档：https://angular.io/guide/lazy-loading-ngmodules

希望这有帮助:)