首页 > 解决方案 > 中途停止加载组件

问题描述

我使用 Angular 7 构建了一个应用程序,它在浏览器上非常安静,并且有很多沉重的组件。每当我从一个半加载的组件导航到另一个组件时,它都需要一些时间。我的问题:我可以以某种方式停止当前加载组件的初始化并开始下一个组件的初始化吗?

我知道,延迟加载和预加载可能是解决我的问题的可能方法之一,但它不是那么有效。

标签: angular

解决方案


对于异步操作,我会确保使用 Observables 并取消订阅它们以中断它们的工作。见https://angular.io/guide/comparing-observables#cancellation

对于数据处理,我建议您查看工作线程(或网络工作人员)。这是一个 JavaScript 特性,这里有很多文章和问题已经涵盖了 web worker 并将它们与 Angular 集成。由于网络工作者在不同的线程中运行,主线程(运行 Angular 的线程)可以取消提交给网络工作者的任务。

编辑:对于画布,还有一个实验性 API,OffscreenCanvas它允许您在 Web Worker 中执行绘图操作。请参阅https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

但是,如果您选择不使用 web worker 或OffscreenCanvas,我认为您所能做的就是优化您使用画布的方式。如果你巧妙地利用 ,window.requestAnimationFrame()每帧执行小批量的操作,我认为你可以构建一个对主线程影响较小的绘图过程,并且可以被中断。

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas


推荐阅读