Javascript Track mithril.js自动重绘系统

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

我的问题是，有没有办法让mithril自动重画系统记录DOM更改（到浏览器控制台或任何地方），这样我就可以查看它，并绝对确保只有预期的DOM元素被更改？我想避免我自己的逻辑错误，并相信米特里尔只是触及了改变了的元素

您可以使用W3CAPI让浏览器记录DOM中正在发生的更改（尽管API非常灵活）。这可以让您全面了解对DOM所做的每一次特定修改

为了在重画后记录结果，您可以在主应用程序之后挂载一个未附加（即从未注入到live文档）组件，并从Mithril的

config

解析上的观察者那里获得一个空根节点，以

takeRecords

。此代码是即时编写的，未经测试，但应能让您了解：

// 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.options，el，records=>console.log（records））

您可以使用W3CAPI让浏览器记录DOM中发生的更改（尽管API非常灵活）。这可以让您全面了解对DOM所做的每一次特定修改

为了在重画后记录结果，您可以在主应用程序之后挂载一个未附加（即从未注入到live文档）组件，并从Mithril的

config

解析上的观察者那里获得一个空根节点，以

takeRecords

。此代码是即时编写的，未经测试，但应能让您了解：

// 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.options，el，records=>console.log（records））

这看起来棒极了，在你回答之前我不知道变异观察者，我在寻找mithriljs本身内置的东西，如果我找不到任何东西，我肯定会同意你的回答。谢谢你这看起来太棒了，在你回答之前我不知道变异观察者，我在寻找一些内置于mithriljs本身的东西，如果我找不到，我肯定会同意你的回答。非常感谢。