MutationObservers 接收到的 MutationRecords 的顺序是什么?

IT技术 javascript reactjs mutation-observers
2021-05-03 19:03:08

react-measure的代码利用了当前浏览器中存在的新 MutationObservers。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 也没有说明。我怎么知道要传递哪个 MutationRecord?

1个回答

在规范中,第4.3.2 节对突变记录进行排队,步骤 4.8:

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

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

从这里你可以看出,例如,如果你从 DOM 中删除一个节点,一个突变记录将被排队(附加到 MutationRecords 列表)。

因此,我相信推断 MutationRecords 的顺序是安全的。

(你可以很容易地做一个测试来验证这一点,同步添加和删除一些节点,然后检查 MutationRecord)