Question

我有一个组件，可以呈现最多一千个元素的列表。

更新DOM需要3/5秒，我的意思是在组件事件componentDidUpdate（在将更改刷新到DOM之后调用）之后，实际看到DOM更新需要3/5秒。

我想展示一个旋转的齿轮或其他东西，但我不知道如何，因为我不知道如何在DOM更新完成后得到通知。

有谁知道？

Answer 1

Javascript是单线程的，并且所有DOM操作都是阻塞的。这意味着如果浏览器忙于添加和更新DOM，这将锁定Javascript线程，直到更新DOM。在实际更新期间，您无法在代码中执行任何操作。

这假设UI锁定实际上是来自原始的，非常大量的DOM操作，而不是其他一些潜在的罪魁祸首。 @ zerkms的评论也很准确，GIF动画，CSS动画等通常不会在浏览器锁定执行大型计算时运行。

如果您预计浏览器锁定，最简单的解决方案是显示一些微调器覆盖，然后运行更新数据的命令。这样微调器就已经在DOM中了。更新完成后，您可以删除微调器。它可能看起来像

zipline run --help

另一个解决方案是将更新分解为块，因此您以足够小的间隔更新DOM，以免锁定Javascript线程。您提供了代码，因此无法充实此解决方案。