提高 Angular 性能的 5 个技巧

淡淡的烟草味﹌ 2023-09-26 23:12 130阅读 0赞

作为 Angular 开发人员，您了解构建高性能 Web 应用程序的重要性。缓慢的加载时间、缓慢的用户界面和糟糕的用户体验都会损害您网站的声誉并阻止用户返回。

不要害怕——有更好的方法！在这篇博文中，您将学习五个可操作的技巧，您可以立即使用它们来提高 Web 应用程序的性能。从避免内存泄漏到在 NgZone 之外运行分析，让我们介绍各种策略来为您的客户提供最佳体验。  
1.防止内存泄漏  
Angular 应用程序中的内存泄漏发生在应用程序内存中的对象不再需要但未被垃圾收集器释放时，因为它们仍在被引用。

在可观察对象的上下文中，如果当组件被销毁或从 DOM 中删除时没有取消订阅，则可观察对象及其相关资源将继续存在于内存中，即使它们不再需要。随着时间的推移，这可能会导致未使用的内存堆积，从而降低应用程序的速度、降低其性能，甚至在极端情况下会导致应用程序崩溃。

假设用户上传了一张图片。应用程序将图像数据存储在内存中，直到可以将其保存到数据库中。为此，应用程序使用Subject它在上传图像时订阅的 。但是，假设应用程序在图像已保存到数据库时没有取消订阅 Subject。在这种情况下，Subject将继续在内存中保存对图像数据的引用。  
@Component(\{\})  
export class ImageUploaderComponent implements OnInit \{  
imageSubject = new Subject();

ngOnInit() \{  
// Subscribe to imageSubject to store uploaded images in memory  
this.imageSubject.subscribe(imageData => \{  
this.saveImageToDatabase(imageData);  
\});  
\}

uploadImage(imageData: any) \{  
// Emit imageData to imageSubject  
this.imageSubject.next(imageData);  
\}

saveImageToDatabase(imageData: any) \{  
// Save image data to database  
// …  
\}

ngOnDestroy() \{  
// Memory leak occurs if we don’t unsubscribe  
// Unsubscribe from imageSubject to prevent memory leaks  
this.imageSubject.unsubscribe();  
\}  
\}  
此外，由于内存泄漏通常难以诊断，因此开发人员在排除故障和解决问题时可能会感到沮丧。因此，Angular 开发人员必须通过在不再需要时充分取消订阅可观察对象来主动防止内存泄漏。

最推荐的订阅可观察对象的方法是使用Async Pipe或rxjs takeUntil运算符。

1.  变化检测策略  
    在 Angular 中，组件有两种变化检测策略：Default 和 OnPush。默认变更检测策略会在每个变更检测周期检查所有组件及其子组件的变更，例如任何用户事件、输入表单、单击按钮等等。这可能会占用大量资源，尤其是在具有许多组件的大型应用程序中，从而导致性能问题。

另一方面，OnPush 变更检测策略仅在组件的输入属性已更改或事件已被组件或其子组件触发时才检查组件中的变更。这可以显着减少变更检测周期的数量并提高应用程序的性能。

两种策略的区别如下图所示，左边是Default策略，右边是OnPush变化检测策略。

1.防止内存泄漏  
Angular 应用程序中的内存泄漏发生在应用程序内存中的对象不再需要但未被垃圾收集器释放时，因为它们仍在被引用。