snabbdom 原始碼除錯總結

2021-10-23 21:49:14 字數 1043 閱讀 5008

在vue.js 中的虛擬 dom 借鑑了 snabbdom,目的是為了讓開發人員避免複雜的 dom 操作也為了跨不同平台

使用 virtual dom,在首次渲染的時候會影響效能因為要建立額外的物件來描述真實 dom,在更新少量標籤的時候也不會有效能上的提公升,在 dom 結構複雜的時候更新 dom,會有效能的提公升,因為僅僅會把前後兩次 dom 樹的差異,更新到真實 dom。

snabbdom 中的h函式,類似於 vue.js 中 render 的 h 引數,都是用來建立 vnode 節點的。

createelm函式的作用是把 vnode 轉換成 dom 物件,但是沒有把新建立的 dom 掛載到 dom 樹,而是先儲存到當前 vnode 物件的 elm 屬性中,並返回新建立的 dom 物件。

patch函式是通過 snabbdom 的入口函式 init 生成的,init 中初始化模組和 dom 操作的 api,最終返回 patch,這裡的init是乙個高階函式,在 init 函式內部快取了兩個引數,在返回的 patch 函式中可以通過閉包訪問到 init 中初始化的模組和 dom 操作的 api。patch 函式中如果第乙個引數是 dom 物件的話,不會對比兩個vnode,而是把新的 vnode 直接轉換成真實 dom ,插入到 dom 樹中,再從 dom 樹移除對應的老節點。

patchvnode的作用是對比新舊兩個 vnode 節點差異,如果兩個節點都沒有 text 屬性再去對比他們的子節點,如果有 text 屬性並且新舊 vnode 的 text 不相等,這時候把新節點的 text 屬性更新到 dom 上。

updatechildren函式的作用是對比新舊 vnode 節點的子節點,在對比的過程中因為 dom 操作的特殊性,同時也為了優化操作,所以只對比兩顆樹中的同一層級的子節點。給 vnode 設定key之後,當在對元素列表排序,或者給列表項插入項的時候會重用上一次對應的 dom 物件,減少渲染次數,因此會提高效能。

snabbdom原始碼解析(一) 準備工作

虛擬 dom 結構概念隨著 react 的誕生而火起來,之後 vue2.0 也加入了虛擬 dom 的概念。於是 google 一下,發現 snabbdom 實現的十分優雅,更易讀。所以決定先去把 snabbdom 的原始碼啃了之後,再回過頭來啃 vue 虛擬 dom 這一塊的實現。為什麼需要 vir...

Windbg 偵錯程式原始碼除錯方法總結

windbg 除錯工具是一款功能豐富的windows 程式除錯工具,可以利用程式崩潰時生成的dump檔案,指定與之對應的程式 exe dll 以及相應的pdb program data base 檔案,指定pdb符號檔案位置 指定原始碼檔案位置 下面是常用的windbg除錯命令 1 analyze ...

除錯RocketMQ原始碼

拷貝namesrv broker的配置檔案到指定目錄,為了避免直接修改 中的配置檔案。1.1 在f盤建立rocketmq資料夾,建立三個子資料夾conf logs store,我的 中多了dev data的資料夾 1.2 將distribution原始碼conf目錄下的broker.conf log...