javascript - 跟踪 mithril.js 自动重画系统

Question

我计划使用 mithril.js 编写一个性能敏感的应用程序，该应用程序将有数千个可以随时更新的 DOM 元素，并且我必须确保只有更新的元素才会被重绘。

我的问题是，有没有一种方法可以让 Mithril 自动重绘系统记录 DOM 更改(到浏览器控制台或任何地方)，以便我可以查看它并绝对确定只有预期的 DOM 元素发生了更改？我想防止自己的逻辑错误，并确信 Mithril 只触及变化的元素。

Answer 1

您可以使用 W3C MutationObserver用于让浏览器记录 DOM 中发生的更改的 API(尽管 API 很繁琐)。这可以让您充分了解对 DOM 所做的每一个具体修改。

为了在重绘后记录结果，您可以在主应用程序之后安装一个未附加的(即从未注入(inject)到实时文档中)组件，并从观察者处获取一个空根节点到takeRecords Mithril 的config 分辨率。这段代码是即时编写的，未经测试，但应该可以给您一个想法:

// Application code 

// Mount an unattached component 
// to log mutation records
m.mount(
  document.createElement( 'div' ),
  {
    controller : function(){
      return new MutationObserver( function( records ){
        console.log( records )
      } )
    },
    view : function( ctrl ){
      return m( 'div', {
        config : function( el, isInitialized ){
          if( !isInitialized ){
            ctrl.observe( el, {
              attributes    : true,
              characterData : true,
              childList     : true
            } )
          }
        }
      } )
    }
  }
)

编辑:当我刚刚尝试时，我发布的代码不起作用。我更新了它以提供工作代码。正如你所看到的，它很复杂、不直观而且丑陋。我已经多次想要这样做，每次我都在 MutationObserver API 中挣扎:突变记录列表很容易阅读，但初始化观察者很笨重，并且总是涉及复制 + 粘贴。所以我写了一个小包装，Muty ，让这变得更容易。使用 Muty，您需要做的就是 muty( muty.options, el, reports => console.log(records ) )。