突变观察者收到的突变记录的顺序是什么?

What is the order of MutationRecords received by MutationObservers?

本文关键字：突变 是什么 顺序 记录 观察者      更新时间：2023-09-26
来自

react-measure的代码利用了当前浏览器中存在的新的MutationObserver。MSDN对此有这样的说法：

此外，突变观察者旨在在通知观察者之前记录多个更改。它们批量处理突变记录，以避免向应用发送事件垃圾邮件。相比之下，突变事件是同步的，会中断正常的代码执行，以通知应用发生突变。尽管突变观察者采用了延迟通知模型，但应用的观察者仍保证在下次重绘之前接收（并有机会处理）所有突变记录。

一个 react-measure 的 MutationObserver 会得到一个 MutationRecords 数组，但示例代码只是抓取第一个：

      <Measure
        whitelist={['height']}
        shouldMeasure={(mutations) => {
          // don't update unless we have mutations available
          if(mutations) {
            return mutations[0].target
          } else {
            return false
          }
        }}
        // notice how target gets passed into onMeasure now
        onMeasure={(dimensions, mutations, target) => {
          this.setState({dimensions})
        }}
      >
        <div>
          I can do cool things with my dimensions now :D
        </div>
      </Measure>

可悲的是，自述文件没有任何关于为什么会起作用的说法，MDN 或 MSDN 也没有。我怎么知道要传递哪个突变记录？

在规范中，第 4.3.2 节 排队突变记录，步骤 4.8：

将记录追加到观察者的记录队列。

然后，如果您在规范中搜索"排队突变记录"，您将看到可以启动"排队突变记录"算法的每个操作。

由此可以看出，例如，如果从 DOM 中删除节点，则突变记录将排队（附加到 MutationRecords 列表）。

因此，我相信可以安全地推断突变记录是按照它们发生的顺序排列的。

（您可以轻松进行测试来验证这一点，同步添加和删除一些节点，然后检查突变记录）

相关文章：