以下是 Atif Afzal 关于 使用一个始终位于页面上的 <div> 来添加/删除工具提示，以及它们如何比直接将这些工具提示放入 <body> 中的性能要好得多。虽然没有明确提及，但将它们放在 DOM 中较高位置的原因是为了能够使用绝对定位将它们精确地放置在页面上的所需位置，而无需处理隐藏溢出或相对父级等问题。
令我惊讶的是，仅仅使用一个单独的容器，甚至没有添加 [CSS]
contain属性就修复了性能问题。现在主要的问题是解释它。最初我以为这可能是浏览器内部的一些启发式算法，对Recalculate Style进行了优化，但实际上没有黑魔法，我发现了原因。
技巧是避免强制重新计算样式
[…] 工具提示容器在页面中不可见，因此修改它不会使整个页面渲染树失效。如果工具提示容器在页面中可见，那么整个渲染树将失效，但在这种情况下，只有独立的子树失效了。对于只有 3 个节点的小子树来说，
Recalculate Style并不会花费太多时间，因此速度更快。
看起来这里使用了 popper.js，因此您必须巧妙地处理它。我们在 CodePen 上使用 Toast 消息，这是我们目前唯一使用的第三方组件：react-hot-toast。我检查了一下，我们不仅将消息放入了我们自己的 <div> 中，该库本身也这样做，所以我认为我们已经解决了问题。
我通常将工具提示附加到 body，因此知道这一点非常有用。感谢您提供这篇见解深刻的文章。Atif 的文章也非常棒。
关于 Hot Toast，到目前为止，您一直坚持使用这个第三方库的理由是什么，而不是根据需要在内部开发定制的、基于 Promise 的工具提示呢？
我们可能在某个时候会替换它们，只是使用第三方工具更快，而且在这种情况下，它满足了我们所需的一切。