跟蹤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 ) ) 。