Track mithril.js 自动重绘系统

Question

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

我的问题是，有没有办法让 mithril 自动重绘系统记录 DOM 更改（到浏览器控制台或任何地方），以便我可以查看它并绝对确定只有预期的DOM 元素正在改变？我想防止我自己的逻辑错误，并确信秘银只是接触了变化的元素。

Answer 1

您可以使用 W3C MutationObserver API 让浏览器记录 DOM 中发生的更改（尽管 API 很繁琐）。这可以让您全面了解对 DOM.

所做的每个特定修改

为了在重绘后记录结果，您可以在主应用程序之后安装一个独立的（即从未注入到实时文档中的）组件，并从 Mithril 上的观察者那里获得一个空的根节点 takeRecords 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, records => console.log( records ) ).

Track mithril.js 自动重绘系统

Track mithril.js auto redrawing system

javascript

mithril.js