0

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

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

4

1 回答 1

3

您可以使用 W3C MutationObserver API 让浏览器记录 DOM 中发生的更改（尽管 API 很复杂）。这可以让您全面了解对 DOM 所做的每个特定修改。

为了在重绘后记录结果，您可以在主应用程序之后安装一个未附加的（即从未注入到活动文档中）组件，并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, records => console.log( records ) ).

于 2016-01-11T19:57:48.910 回答