vue原理Compile之optimize標記靜態節點原始碼範例

2022-07-13 14:01:18

引言

optimize這一步的內容好像不太多，但是非常重要，於是是一個更新效能優化，非常重要

先來看看 optimize 在什麼位置，就在 parse 處理完之後，generate 之前

var ast = parse(template.trim(), options);
if (options.optimize !== false) {
    optimize(ast, options);
}
var code = generate(ast, options);

上面這段程式碼在函數 baseCompile 中，如果想了解的，看這裡 Compile - 從新建範例到 compile結束的主要流程

而 optimize 的作用是什麼呢？

Vue官方註釋

優化器的目標

遍歷生成的模板AST樹，檢測純靜態的子樹，即永遠不需要更改的DOM。

一旦我們檢測到這些子樹，我們可以:

1、把它們變成常數，這樣我們就不需要了在每次重新渲染時為它們建立新的節點

2、在修補過程中完全跳過它們。

那是怎麼做的呢？

給靜態ast節點設定屬性 static，當節點時靜態是

el.static = true

下面就來看下原始碼

function optimize(root, options) {    
    if (!root) return
    // first pass: mark all non-static nodes.
    markStatic$1(root);    
    // second pass: mark static roots.
    markStaticRoots(root);
}

裡面主要呼叫了兩個函數，這兩個函數會分別分析

但是在此之前，我們先來看一個函數，這個函數就是判斷靜態節點的主力函數

直接傳入 ast 節點，各種組合判斷，然後給 ast 節點新增上 static 屬性

function isStatic(node) {    
    // 文字表示式
    if (node.type === 2) return false
    // 純文字
    if (node.type === 3) return true
    return (        
        // 設定了 v-pre 指令，表示不用解析
        node.pre ||
        (
            !node.hasBindings &amp;&amp; // 沒有動態繫結
            ! node.if &amp;&amp; !node.for &amp;&amp; // 不存在v-if ，v-for 指令
            ! ['slot','component'].indexOf(node.tag)&gt;-1 &amp;&amp; // 需要編譯的標籤
            isPlatformReservedTag(node.tag) &amp;&amp; // 正常html 標籤
            ! isDirectChildOfTemplateFor(node) &amp;&amp;
            Object.keys(node).every(isStaticKey)
        )
    )
}

如果要判斷為靜態節點，就要經過下面7個條件的審判（把上面的程式碼列了出來）

1 是否存在 v-pre

如果新增了指令 v-pre，那麼 node.pre 為 true，表明所有節點都不用解析了

2 不能存在 node.hasBindings

當節點有繫結 Vue屬性的時候，比如指令，事件等，node.hasBindings 會為 true

3 不能存在 node.if 和 node.for

同樣，當節點有 v-if 或者 v-for 的時候，node.if 或者 node.for 為true

4 節點名稱不能是slot 或者 component

因為這兩者是要動態編譯的，不屬於靜態範疇

所以只要是 slot 或者 component 都不可能是靜態節點

5 isPlatformReservedTag(node.tag)

isPlatformReservedTag 是用於判斷該標籤是否是正常的HTML 標籤，有什麼標籤呢？

標籤必須是正常HTML標籤，如下

html,body,base,head,link,meta,style,title

address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section

div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul

a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby

s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video

embed,object,param,source,canvas,script,noscript,del,ins

caption,col,colgroup,table,thead,tbody,td,th,tr

button,datalist,section,form,input,label,legend,meter,optgroup,option

output,progress,select,textarea

details,dialog,menu,menuitem,summary

content,element,shadow,template,blockquote,iframe,tfoot

svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face

foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern

polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view

是不是挺多的，哈哈，尤大真厲害，估計收集了很多，我覺得應該有用，就全放上來了

6 isDirectChildOfTemplateFor(node)

看下這個函數的原始碼

function isDirectChildOfTemplateFor(node) {    
    while (node.parent) {
        node = node.parent;        
        if (node.tag !== 'template') {            
            return false
        }        
        if (node.for) {            
            return true
        }
    }    
    return false
}

表明了節點父輩以上所有節點不能是 template 或者帶有 v-for

7 Object.keys(node).every(isStaticKey)

isStaticKey是一個函數，用於判斷傳入的屬性是否在下面的範圍內

type,tag,attrsList,attrsMap,plain,parent,children,attrs

比如這樣的 ast

<div style="" ></div>
{    
    attrsList: []
    attrsMap: {style: ""}
    children: []
    parent: undefined
    plain: false
    tag: "div"
    type: 1
}

上面的 ast 的所有屬性通過 isStaticKey 判斷之後，都在上面列出的屬性範圍中，都是靜態屬性，所以這就是一個靜態節點

而當你存在之外的其他屬性的時候，這個節點就不是靜態ast

然後下面就來看 optimize 中出現的兩個函數把

markStatic$1 和 markStaticRoot

標記靜態節點

怎麼標記一個節點是否是靜態節點呢，就在 markStatic$1 中進行處理

// 標記節點是否是靜態節點
function markStatic$1(node) {
    node.static = isStatic(node);    
    if (node.type !== 1) return
    // 不要將元件插槽內容設定為靜態。
    // 這就避免了
    // 1、元件無法更改插槽節點
    // 2、靜態插槽內容無法熱載入
    if (        
        // 正常 thml 標籤 才往下處理，元件之類的就不可以
        !isPlatformReservedTag(node.tag) &&
        // 標籤名是 slot 才往下處理
        node.tag !== 'slot' &&
        // 有 inline-tempalte 才往下處理
        node.attrsMap['inline-template'] == null
    ) {        
        return
    }    
    // 遍歷所有孩子，如果孩子 不是靜態節點，那麼父親也不是靜態節點
    var l = node.children.length    
    for (var i = 0;i < l; i++) {        
        var child = node.children[i];  
        // 遞迴設定子節點，子節點再呼叫子節點
        markStatic$1(child);        
        if (!child.static) {
            node.static = false;
        }
    }    
    if (node.ifConditions) {    
        var c = node.ifConditions.length  
        for (var j = 1; j < c; j++) {    
            // block 是 節點的 ast
            var block = node.ifConditions[j].block;
            markStatic$1(block);  
            if (!block.static) {
                node.static = false;
            }
        }
    }
}

這個方法做了下面三種事情

1 isStatic 這個方法對 ast 節點本身進行初步判斷

進行初步靜態節點判斷

2 判斷靜態節點的額外的處理

給節點本身判斷完是否靜態節點之後，需要做額外的處理，就是需要檢查所有的子孫節點

於是便會逐層遞迴子節點，如果某子節點不是靜態節點，那麼父節點就不能是靜態節點，但是並不是所有節點都會進行特殊處理，是有條件的

節點型別是 1

型別 1 是標籤元素
型別 2 是文字表示式
型別 3 是純文字

3 是正常 html 標籤，標籤是 slot，存在 inline-template 屬性

1、必須是正常標籤，也就是說自定義標籤不需要再次處理

2、slot 會額外處理

3、有 inline-template 屬性也會額外處理

只有有一個滿足，就會進行額外處理

疑點

你可以看到原始碼中的最後一步

判斷 node.ifCondition，並且如果 ifCondition 中儲存的節點不是靜態的話，那麼這個 node 也不是靜態節點

這個判斷就很讓我匪夷所思了

明明如果存在 v-if 的話，該節點在一開始的 isStatic 中，就會被設定 node.static 為 false 了

為什麼還要在末尾再判斷一遍呢？

這裡我覺得好像有點多餘？反正我沒有想通尤大的想法啊啊啊啊啊，為了確保正確？

經過這一步，所有的節點，都會被新增上 static 屬性，節點是否靜態，一看便知

標記靜態根節點

// 標記根節點是否是靜態節點
function markStaticRoots(node) {    
    if (node.type === 1) return
    // 要使一個節點符合靜態根的條件，它應該有這樣的子節點
    // 不僅僅是靜態文字。否則，吊裝費用將會增加
    // 好處大於好處，最好總是保持新鮮。
    if (        
        // 靜態節點
        node.static &amp;&amp;        
        // 有孩子
        node.children.length &amp;&amp;        
        // 孩子有很多，或者第一個孩子不是純文字
        ! (node.children.length === 1 
            &amp;&amp; node.children[0].type === 3
          )
    ) {
        node.staticRoot = true;        
        return
    }
    else {
        node.staticRoot = false;
    }    
    if (node.children) {    
        var l = node.children.length    
        for (var i = 0; i &lt; l; i++) {
            markStaticRoots(
                node.children[i]
            );
        }
    }
}

這個方法只會不斷的尋找靜態的根節點，應該說是區域根節點吧，反正一個節點下面有馬仔節點，這個節點就算是根節點

遞迴他的所有子孫，看看誰是靜態根節點，如果是靜態ast，就會被新增上 staticRoot 這個屬性

markStaticRoots 也是遞迴呼叫的，但是並不是會處理到所有節點

因為找到一個根節點是靜態根節點後，就不會遞迴處理他的子節點了

然後我們需要了解兩個問題

1、markStaticRoot 和 markStatic$1 的區別

2、判斷靜態根節點的依據是什麼

markStaticRoots 和 markStatic$1 有什麼區別？

找出靜態根節點才是效能優化的最終作用者

markStatic$1 這個函數只是為 markStaticRoots 服務的，是為了先把每個節點都處理之後，更加方便快捷靜態根節點，可以說是把功能分開，這樣處理的邏輯就更清晰了

先給所有的節點都劃分身份，之後處理靜態節點時，只用找那部分的根節點（區域負責人就好了）

當然，上面都是我個人的理解，那麼我的依據是什麼呢？

markStatic$1 新增的 static 屬性，我全域性搜尋，並沒有在處理DOM和生成 render上使用過

而 markStaticRoots 新增的 staticRoot ，在生成 render 上使用了

而且再根據 markStaticRoots 寫的功能邏輯並使用了 static 屬性進行判斷

所以我認為 markStatic$1 是為 markStaticRoots 服務的一個函數

被判斷為靜態根節點的條件是什麼？

1該節點的所有子孫節點都是靜態節點

而 node.static = true 則表明了其所有子孫都是靜態的，否則上一步就被設定為 false 了

2必須存在子節點

3子節點不能只有一個純文位元組點

這一點我不太明白，為什麼只有一個純文字子節點時，這個點不能是靜態根節點？

注意：只有純文字子節點時，他是靜態節點，但是不是靜態根節點。靜態根節點是optimize 優化的條件，沒有靜態根節點，說明這部分不會被優化

而 Vue 官方說明是，如果子節點只有一個純文位元組點，如果優化的話，帶來的成本就比好處多了，所以就不優化

那麼我就疑惑了

為什麼子節點只有是靜態文字時，成本會大？

下面是我的個人探索的想法

首先，我們明確，優化的好處是，減少DOM比對，加速更新

而帶來的成本是什麼呢？

1、維護靜態模板儲存物件

2、多層函數呼叫

現在我們來簡單解釋下上面兩種成本

1 維護靜態模板儲存物件

一開始的時候，所有的靜態根節點都會被解析生成 VNode，並且被存在一個快取物件中，就在 Vue.proto._staticTree 中

比如下面這個靜態模板

解析後被存了進去

隨著靜態根節點的增加，這個儲存物件也會越來越大，那麼佔用的記憶體就會越來越多

勢必要減少一些不必要的儲存，所有隻有純文字的靜態根節點就被排除了

2 多層函數呼叫

這個問題涉及到 render 和靜態 render 的合作

舉個例子

一個動態跟靜態混合的模板

生成的 render 函數是這樣的

with(this) {    
    return _c('div', [
        _m(0),
        ( testStaticRender) ? _c('span') : _e()
    ])
}

看到 _m(0) 了嗎，這個函數就是去獲取靜態模板的

這樣，靜態模板的處理

就多了一個 _m 函數的呼叫，加上初期涉及到了很多函數的處理，其中包括上一步的儲存

再者，既然純文位元組點不做優化

那麼就是說更新時需要比對這部分嘍？

但是純文字的比對，就是直接比較字串是否相等而已啊

消耗簡直不要太小，那麼這樣，我還有必要去維護多一個靜態模板快取嗎？

綜上所述

只有純文字子節點最好不要當做靜態模板處理

以上只是個人的意淫想法，如有不同意見可以提出

番外疑惑

我不禁疑惑到，難道只有一個普通標籤子節點的時候，好處難道會大一些嗎？

可以看到模板放在了 staticRenderFns 上，做了靜態模板處理

結果論出發的話，可能消耗的確大一些吧哈哈哈

更新的時候，會比較 div 和 span 和 span 內的純文字

以上就是vue原理Compile之optimize標記靜態節點原始碼範例的詳細內容，更多關於Compile optimize標記靜態節點的資料請關注it145.com其它相關文章！