在dom最前面插入 Vue虛擬DOM及diff演算法

2021-10-16 03:22:51 字數 1251 閱讀 7085

瀏覽器解析乙個html大致分為五步:建立dom tree –> 建立style rules -> 構建render tree -> 布局layout –> 繪製painting。每次對真實dom進行操作的時候,瀏覽器都會從構建dom樹開始從頭到尾執行一遍流程。真實的dom操作代價昂貴,操作頻繁還會引起頁面卡頓影響使用者體驗,虛擬dom就是為了解決這個瀏覽器效能問題才被創造出來

createelement用法詳解,點我

const h = this.$createelement;

h('p', null, [

h('span', null, '一則訊息來自'),

h('a', ,

// 樣式

style: ,

},'耗子'

)])//渲染結果

////一則訊息來自

耗子//

vdom優點:1、保證效能下限。2、無需手動操作dom。3、跨平台

vdom缺點:不能極致優化

vue的diff演算法是僅在同級的vnode間做diff,遞迴地進行同級vnode的diff,最終實現整個dom樹的更新。因為跨層級的操作是非常少的,忽略不計。

1、patch :

return function patch (oldvnode, vnode, hydrating, removeonly)  else  else 

}invokeinserthook(vnode, insertedvnodequeue, isinitialpatch);

return vnode.elm

} //同一節點samevnode的判斷

function samevnode (a, b)

2、patchvnode的規則(上圖有流程,下圖有demo)原始碼**太長,這裡只說過程簡述1)四個變數無法互相匹配

2)結束時存在兩種具體的情況:

olds大於olde的情況

參考:vue中的虛擬dom及diff演算法 - 掘金​juejin.im

讓MessageBox在最前面顯示

用 引數messageboxtext 型別 system.string 指定文字顯示的 string caption 型別 system.string 指定標題欄宣告中顯示的 string button 型別 system.windows.messageboxbutton 指定的 messagebo...

Unity視窗顯示在最前面

1 得到unity程式視窗的控制代碼 2 判斷unity程式視窗是否在最前面,如果不是,則將其顯示在最前面 dllimport user32.dll private static extern intptr findwindow string lpclassname,string lpwindown...

開機自啟,始終在最前面

開機啟動函式 void ccommwizarddlg onbnclickedcheckstart if bresult regsetvalueex hregkey,t starbyself 0,reg sz,const unsigned char currentpath,max path error...