Angular 中的 setTimeout 性能效果答案

【问题标题】：setTimeout Performance Effects in AngularAngular 中的 setTimeout 性能效果
【发布时间】：2017-06-26 21:00:33
【问题描述】：

我还没有找到关于 setTimeout 用法和 Angular 2+ 性能的好的信息。 setTimeouts 如何影响性能，当 setTimeout 被触发时 Angular 会做什么？一个网站建议它会导致脏检查，但在我的测试中，我没有看到明显的差异。

UI 使用示例：虽然我尽可能避免使用 setTimeouts，但我遇到了对具有相对频率的 UI 组件的需求。例如，假设所有可能的组件都加载到 webapp 上，在用户交互之后，我可能想要获取元素的 offsetWidth，但在渲染元素之前它不会返回实际宽度。这是许多其他 UI 相关代码中最简单的示例，其中永恒的 setTimeout 是完美的。因此，当我设置属性 elemWidth（继续示例）时，我希望/希望 Angular 只关心我更改了一个组件实例中的一个属性，而不进行任何其他对象检查。当我从整个 UI 组件库中删除所有 setTimeouts 以使用所有这些实例的许多实例针对 web 应用程序测试性能时，Chrome 并没有显示从删除这些组件中获得任何好处......我想要尽可能快的组件，那么 setTimeouts 如何影响Angular 2+ 的性能，以及 Angular 对它们的反应是什么？

【问题讨论】：

标签： performance angular settimeout

【解决方案1】：

Angular 只运行 Javascript，所以我认为 Angular 中的 setTimeout 不会比您的原生 Javascript 更好或更差。

我可能想获取一个元素的 offsetWidth，但在渲染元素之前它不会返回实际宽度

使用ngAfterViewInit() 生命周期挂钩。它是 Angular 在视图被渲染时调用的函数。到那时你就会知道你的 UI 是什么样子了。

公平地说，使用大量 setTimeouts 听起来像是一种黑客行为。查看您正在观察的对象触发了哪些事件并绑定到这些事件。

【讨论】：

我希望避免的是 Angular 需要不必要地检查其他更改，例如 AngularJS 中的摘要循环，并且只关心更改。
生命周期钩子非常适合在组件设置或关闭时使用，但在这些 UI 交互触发的事件中，其中一些动态呈现发生在组件完全设置之后。