跟踪mithril.js自动重绘系统

Question

我打算使用mithril.js编写对性能敏感的应用程序，该应用程序将具有数千个可以随时更新的DOM元素，而且我必须确保仅重绘更新的元素。

我的问题是，是否有一种方法可以使秘银自动重绘系统记录DOM更改（到浏览器控制台或任何地方），以便我可以对其进行检查并绝对确保仅更改了预期的DOM元素？ 我想防止自己的逻辑错误，并确保秘银只触及已更改的元素。

Answer 1

您可以使用W3C MutationObserver API来使浏览器记录DOM中发生的更改（尽管该API很麻烦）。 这可以使您充分了解对DOM所做的每个特定修改。

为了在重绘后记录结果，您可以在主应用程序之后安装一个未附加的组件（即，从未注入到活动文档中）， takeRecords从观察者那里获取一个空的根节点，以基于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( muty.options, el, records => console.log( records ) ) 。