mut observer bug取决于Chrome版本

Question

我在FullCalendar计划程序中使用一个变异观察器来同步两个div的宽度（当调整大小时）。

我使用的是Chrome版本：72.0.3626.109，一切正常。但是，当我尝试低于72.0.36的版本时，它会在我的应用程序中出现错误。

但突变观察者似乎有一段时间了......而且，它似乎并没有起作用。

这是代码;也许我做错了什么：

unifyResourceAreaResize: function() {
   var target = $(".fc-resource-area");
   var observer = new MutationObserver(function(mutations) {
      target.width(mutations[0].target.offsetWidth);
   });
   for (var i = 0; i < target.length; i++) {
      observer.observe(target[i], { 
         attributes: true, 
         childList: true, 
         characterData: true 
      });
   }
}

这是一个codePen CodePen problem

总共有4个.fc-resource-area，fullcalendar调度程序有2个元素（资源头和资源列表），我总共有2个日历。这就是我试图同步两个日历资源列调整大小的原因。

谢谢您的帮助。

Answer 1

代码中的问题：

• 将相同的值写入DOM属性将触发观察者，使其在无限循环中旋转并且页面冻结。
• [查看codepen上的完整代码] eventAfterAllRender可能每次调用你的unifyResourceAreaResize函数，因此除了旧的变异观察者之外还注册了新的变异观察者，例如，如果实际的DOM没有被更改。

解：

• 只宣告观察者一次。
• 使用自动填充的document.getElementsByClassName而不是jQuery。
• 如果差异小于1px，则跳过更新宽度。
• 无需观察childList或子树，您只需要style属性（请参阅more tips）。

---

var targets = document.getElementsByClassName("fc-resource-area");
var observer = new MutationObserver(function (mutations) {
  var width = parseFloat(mutations[0].target.style.width);
  Array.prototype.forEach.call(targets, function (el) {
    if (Math.abs(parseFloat(el.style.width) - width) >= 1) {
      el.style.width = width + 'px';
    }
  });
});

function unifyResourceAreaResize() {
  for (var i = 0; i < targets.length; i++) {
    observer.observe(targets[i], {
      attributes: true,
      attributeFilter: ['style'],
    });
  }
}

附：如果在运行代码之前打开devtools，则可以在页面冻结时单击“源”面板中的“暂停”按钮，这将暂停devtools中的代码，以便您可以检查它。