如何检测 Web 应用中不必要的 DOM 元素渲染以提高性能

简介

说明主要问题

查找不必要的重绘

修复问题

结论

发现拼写错误？

跟我来

您可能还喜欢阅读

我给出的代码示例使用的是 Angular，但只有很少的代码来说明主要问题，并且该问题可能发生在任何与 DOM 交互的 Javascript 应用程序中。

简介

Web 应用程序中不必要的重新绘制可能会对性能产生严重影响。

虽然你可能在高端设备上开发它，但你甚至可能没有注意到。但在低端设备上运行它的用户肯定会注意到。

还有一个问题：如何意识到不必要的重绘？

说明主要问题

在我们深入探讨这个问题之前，让我先说明一下最初的问题。

这是一个非常基本的应用程序，它模拟获取用户数组并在列表中逐行显示每个用户。

如果你多次点击“获取人员”按钮会发生什么？显然什么也没有。我们的列表仍然一样，没有删除或添加任何内容……然而……

查找不必要的重绘

当我们点击按钮获取人员时，在这个例子中，我们模拟了一次网络调用，并返回一个包含人员的数组。结果恰好相同。但在幕后，我们会收到该数组的全新引用……以及其中的所有对象！因此，Angular 假设它必须重新绘制整个列表。

但是，如何在整个应用中检测到这种情况呢？我们是否必须时刻警惕所有可能触发框架重绘应用不必要部分的情况？

有一个非常简单的方法可以找到答案，你只需要注意 chrome devtool 中一个有点隐藏的功能：Paint flashing。

它可以在以下位置找到：开发工具>汉堡菜单>更多工具>渲染>油漆闪烁。

这里是找到它的位置以及此功能的演示：

注意到了吗？每当我们获取用户列表时，整个列表都会闪烁绿色。这是开发工具在显示哪些 DOM 元素被重绘了。如果我们获取的是同一个列表，它肯定不应该重绘！

修复问题

这需要一些调查，很遗憾，我目前没有灵丹妙药可以告诉你。在这个特殊情况下，我们可以告诉 Angular 通过唯一 ID 来跟踪元素，以便它知道是否可以重用元素。这篇博文与 Angular 无关，所以我不会详细讨论这个问题，但如果我们像这样使用trackBy一个，并将函数定义为ngFor*ngFor="let person of people; trackBy: trackById"trackById



public trackById(_: number, person: Person) {
  return person.id;
}

然后 Angular 将能够优化渲染。

注意，第一次获取列表时，它当然需要渲染一次。所以它会闪烁绿色。但每当我再次尝试获取它时，只有按钮闪烁（当我点击它时，它会动起来）。

从那里，我们知道我们已经优化了我们的应用程序以避免不必要的渲染✅。

结论

这种方法能帮你快速找出那些不该重绘的项目。当然，我画的图本身没什么问题，因为它只是一个演示应用。但在实际应用中，为了反映数据的快速变化，你会快速渲染成百上千个 DOM 元素，这时就可能会出问题。

希望你喜欢这篇文章。如果你想了解更多关于 Angular、RxJS、开源、自托管、数据隐私等方面的技巧，欢迎点击关注。感谢阅读！

发现拼写错误？

如果您发现本博文中有拼写错误、需要改进的句子或其他任何需要更新的内容，您可以通过 Git 仓库访问并提交拉取请求。无需发表评论，请直接前往https://github.com/maxime1992/my-dev.to并提交新的拉取请求，提交您的修改。如果您对我如何通过 Git 和 CI 管理我的 dev.to 帖子感兴趣，请点击此处了解更多信息。