手寫現代前端框架diff演算法-前端面試進階

hello_world_1024發表於2023-02-20
前端框架演算法面試

前言

在前端工程上，日益複雜的今天，效能最佳化已經成為必不可少的環境。前端需要從每一個細節的問題去最佳化。那麼如何更優，當然與他的如何怎麼實現的有關。比如key為什麼不能使用index呢？為什麼不使用隨機數呢？答案當然是影響效能，那為什麼？相信你看完本文的diff演演算法就能略懂一些。

diff演演算法的概念

diff演演算法, 是 Virtual DOM 產生的一個概念， 作用是用來計算出 Virtual DOM 中被改變的部分，然後根據演演算法算出dom的結果進行原生DOM操作，而不用重新渲染整個頁面，從而提高了頁面渲染效率，已經成為當今框架（vue,react）必不可少的部分。

手寫diff演演算法的過程

背景：dom對效能的消耗特別高，因此前輩們提出用js物件模擬dom的操作，計算出最後需要更新的部分。而dom本身的演演算法的時間複雜度是O(n ^ 3)。這時react團隊，提出了diff演演算法！（本案例提供核心程式碼，以及完整案例）
簡單理解版本的思路的核心，可分為三個步驟：

1.模擬"dom樹"，將dom轉換為js陣列。

定義js建構函式，可同步dom物件。通常物件可由下邊組成：

  tag('string'):標籤的名稱
  props('object'):屬性與屬性的值{ class: 'a', type: 'hidden'}
  children('array'):子屬性
  key('string'):表示元素的唯一標識 'nowKeys'

2.獲取兩個dom數之間的差異（diff演演算法）

對比兩個dom對應的實體，獲取他們的不同點，根據順序陣列。當前demo處理了以下方法：

  Change: 'Change',//表示元素有變化
  Move: 'Move',//表示移動了位置
  Add: 'Add',//表示元素是新增的
  Del: 'Del',//表示元素給刪除了
  DiffPropsList: 'DiffPropsList',//表示元素對應的屬性列表有變動
  DelProps: 'DelProps',//表示該屬性給刪除
  ChangeProps: 'ChangeProps',//表示該屬性有變化
  AddProps: 'AddProps',//表示該屬性是新增的

3.將“差異”進行“渲染”

根據步驟2），將差異進行對應的處理

例項方法如下：

var a1 =new WzElement('div', { class: 'a1Class' }, ['a1'], "a1")；
var a2 =new WzElement('div', { class: 'a2Class' }, ['a2'], "a2")
let root = a1.render();//js模擬dom生成
步驟2）
let pathchs = diff(a1, a2); //獲取當前的兩個dom的差異
步驟3）
reloadDom(root, pathchs);//根據差異重新渲染

核心的程式碼（步驟1）：

  _createDom( tag, props, children, key ){
      let dom = document.createElement( tag );
      for( let propKey in props ){
          dom.setAttribute( propKey, props[propKey] );
      }
      if( !key ){
          dom.setAttribute( "key", key );
      }
      children.forEach( item => {
          if( item instanceof WzElement ){//
              var root = this._createDom(
                  item.tag,
                  item.props,
                  item.children,
                  item.key
              )
              dom.appendChild( root ); 
          }else{
              var childNode = document.createTextNode( item );
              dom.appendChild( childNode ); 
          }
      });
      return dom;
  }

核心的程式碼（步驟2）：

//判斷當前物件
function dfs(oldElement, newElement, index, patches) {
    //如果新的物件為空，無需要對比
    //如果新的物件，key跟tag都不同，說明元素變了，直接替換。
    //如果新的物件，key跟tag都相同，則遍歷子集，觀察子集是否不同,觀察元素屬性是否不同
    var curPatches = [];
    if (!newElement) {
    } else if (oldElement.key != newElement.key || oldElement.tag != newElement.tag) {
        curPatches.push({
            type: stateType.Change,
            node: newElement
        });
    } else {
        var propsDiff = diffProps(oldElement.props, newElement.props);
        if (propsDiff.length > 0) {
            curPatches.push({
                type: stateType.DiffPropsList,
                node: newElement
            });
        }
        diffChildren(oldElement.children,  newElement.children,index, patches);//對比子集是否不同
    }
    if (curPatches.length > 0) {
        if (!patches[index]) {
            patches[index] = []
        }
        patches[index] = patches[index].concat(curPatches);
    }
    return patches;
}


//對比子集是否不同
function diffChildren(oldChild, newChild, index, patches) {
    let { changeList, resultList } = listDiff(oldChild, newChild, index, patches);
    if (changeList.length > 0) {
        if (!patches[index]) {
            patches[index] = []
        }
        patches[index] = patches[index].concat(changeList);
    }
    let last = null;
    oldChild && oldChild.forEach((item, i) => {
        let child = item && item.children;
        if (child) {
            if ( last && last.children != null) {//有子節點
                index = index + last.children.length + 1;
            } else {
                index += 1;
            }
            let keyIndex = resultList.indexOf( item.key ) ;
            let node = newChild[keyIndex]
            //只遍歷新舊中都存在的節點，其他新增或者刪除的沒必要遍歷
            if ( node ) {
                dfs(item, node, index, patches)
            }
        } else {
            index += 1;
        }
        last = item
    });
}

參考 前端進階面試題詳細解答

核心的程式碼（步驟3）：

var num = 0;
//根據virtDom的結果渲染頁面
function reloadDom( node, patchs ){
    var changes = patchs[ num ];
    let childNodes = node && node.childNodes;
    if (!childNodes) num += 1
    if( changes != null  ){
        changeDom( node, changes );
    }
    //保持更diff演演算法的num一直
    var last = null
    childNodes && childNodes.forEach(( item, i ) => {
        if( childNodes ){
            if ( last && last.children != null) {//有子節點
                num = num + last.children.length + 1;
            } else {
                num += 1;
            }
        }
        reloadDom( item, patchs );
        last = item;
    })
}

//執行每個dom的變化
function changeDom( node, changes ){
    changes && changes.forEach( change => {
        let {type} = change;
        switch( type ){
            case stateType.Change:
                node.parentNode && node.parentNode.replaceChild( change.node.create() , node );
                break;
            case stateType.Move:
                let fromNode = node.childNodes[change.from];
                let toNode =  node.childNodes[change.to];
                let formClone = fromNode.cloneNode(true);
                let toClone = toNode.cloneNode(true);
                node.replaceChild( fromNode, toClone ) ;
                node.replaceChild( toNode, formClone ) ;
                break;
            case stateType.Add:
                node.insertBefore( change.node.create(),  node.childNodes[ change.index ]  )
                break;
            case stateType.Del:
                node.childNodes[change.index ].remove();
                break;
            case stateType.DiffPropsList:
                let {props} = change.node;
                for( let key in props ){
                    if( key == stateType.DelProps ){
                        node.removeAttribute( );
                    } else {
                        node.setAttribute( key, props[key] );
                    }
                }
                break;
            default:
                break;
        }
    });
}

相關文章