执行JavaScript后，检查DOM是否处于稳定状态（没有活动的重排/重新绘制）

Question

前言

请注意下面的问题稳定并未涉及某些特定的创造行业术语（我在过去5年中与js合作并且没有听说过术语＆＃ 34;稳定的DOM＆＃34;所以假设没有这样的东西）。这也没有涉及规范。稳定意味着 - 目前没有进行回流或重新喷涂，也没有预定。

问题

如果在触发重绘/重排（see here for examples of reflow/repaint）的某些javascript之后检查DOM树/页是否稳定

1. 是否有browser，window，DOM等）事件我可以addEventListener到？

2. 也许有一些奇怪的方法来做这个，比如把我的代码作为回调函数运行到像requestAnimationFrame()这样的函数？

我的设置（我相信这个问题足够详细，只有上面的文字，但有人要求我设置）

我有React应用程序。在一个地方，我递归地使用.offsetTop来查找componentDidMount方法中页面主体中少数组件的偏移量。即使用此函数，我传递document.getElementById()

找到的4个元素

findPosY = obj => {
    let curtop = 0
    if (typeof obj.offsetParent !== 'undefined' && obj.offsetParent) {
      while (obj.offsetParent) {
        curtop += obj.offsetTop
        obj = obj.offsetParent
      }
      curtop += obj.offsetTop
    } else if (obj.y) {
      curtop += obj.y
    }
    return curtop
  }

此函数返回2个相同高度的元素。但如果我在100ms之后进行计算，那么一切都会完美无缺。

在其他组件中，我使用js进行了一些交互，其中渲染的html内联样式可能会在渲染过程中发生。

更新1。 DOMContentLoaded在这里没有帮助。运行高度计算为

document.addEventListener('DOMContentLoaded', () => {
  // call appropriate function
})

没有提供所需的结果。

Answer 1

我认为没有这样的事情。

如果有任何“重排计划”，offsetTop必须停止，直到重排完成，并且只返回一次“稳定状态”的值，所以我不确定这样的事情会对你有什么帮助，即使它存在。

检查是什么导致您在即时执行和延迟执行之间观察到的差异。如果这没有帮助，请创建MVCE，也许它会变成您正在测试的浏览器的有用错误报告。