中文字幕av高清_国产视频一二区_男女羞羞羞视频午夜视频_成人精品一区_欧美色视_在线视频这里只有精品

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁  >  技術(shù)干貨  > vue中的虛擬dom和diff算法

vue中的虛擬dom和diff算法

來源:千鋒教育
發(fā)布人:qyf
時間: 2022-09-19 17:21:58 1663579318

vue中的虛擬dom和diff算法

  Virtual DOM 其實(shí)就是一棵以 JavaScript 對象( VNode 節(jié)點(diǎn))作為基礎(chǔ)的樹,用對象屬性來描述節(jié)點(diǎn),實(shí)際上它只是一層對真實(shí) DOM 的抽象。最終可以通過一系列操作使這棵樹映射到真實(shí)的DOM上

  下面就是一個真實(shí)DOM映射到虛擬DOM的例子:

 <ul id='list'>

          <li class='item'>Item 1</li>

          <li class='item'>Item 2</li>

          <li class='item'>Item 3</li>

        </ul>

 

 var element = {

        tagName: 'ul', // 節(jié)點(diǎn)標(biāo)簽名

        props: { // DOM的屬性,用一個對象存儲鍵值對

            id: 'list'

        },

        children: [ // 該節(jié)點(diǎn)的子節(jié)點(diǎn)

          {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},

          {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},

          {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},

        ]

    }

  在補(bǔ)充點(diǎn)虛擬DOM的好處

  具備跨平臺的優(yōu)勢

  由于 Virtual DOM 是以 JavaScript 對象為基礎(chǔ)而不依賴真實(shí)平臺環(huán)境,所以使它具有了跨平臺的能力,比如說瀏覽器平臺、Weex、Node 等。

  操作原生DOM慢,js運(yùn)行效率高。我們可以將DOM對比操作放在JS層,提高效率。

  因?yàn)镈OM操作的執(zhí)行速度遠(yuǎn)不如Javascript的運(yùn)算速度快,因此,把大量的DOM操作搬運(yùn)到Javascript中,運(yùn)用patching算法來計算出真正需要更新的節(jié)點(diǎn),最大限度地減少DOM操作,從而顯著提高性能。

  Virtual DOM 本質(zhì)上就是在 JS 和 DOM 之間做了一個緩存。可以類比 CPU 和硬盤,既然硬盤這么慢,我們就在它們之間加個緩存:既然 DOM 這么慢,我們就在它們 JS 和 DOM 之間加個緩存。CPU(JS)只操作內(nèi)存(Virtual DOM),最后的時候再把變更寫入硬盤(DOM)

  提升渲染性能

  Virtual DOM的優(yōu)勢不在于單次的操作,而是在大量、頻繁的數(shù)據(jù)更新下,能夠?qū)σ晥D進(jìn)行合理、高效的更新。

  diff算法

  vdom因?yàn)槭羌兇獾腏S對象,所以操作它會很高效,但是vdom的變更最終會轉(zhuǎn)換成DOM操作,為了實(shí)現(xiàn)高效的DOM操作,一套高效的虛擬DOM diff算法顯得很有必要

  diff算法包括一下幾個步驟:

  用 JavaScript 對象結(jié)構(gòu)表示 DOM 樹的結(jié)構(gòu);然后用這個樹構(gòu)建一個真正的 DOM 樹,插到文

  檔當(dāng)中

  當(dāng)狀態(tài)變更的時候,重新構(gòu)造一棵新的對象樹。然后用新的樹和舊的樹進(jìn)行比較(diff),記錄兩棵樹差異

  把2所記錄的差異應(yīng)用到步驟1所構(gòu)建的真正的DOM樹上(patch),視圖就更新了

  diff算法是通過同層的樹節(jié)點(diǎn)進(jìn)行比較而非對樹進(jìn)行逐層搜索遍歷的方式,所以時間復(fù)雜度只有O(n),是一種相當(dāng)高效的算法

  實(shí)現(xiàn)虛擬DOM的過程

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
快速通道
主站蜘蛛池模板: 成人射区 | 亚洲精品久久久日韩美女极品合集下载 | 中文字幕亚洲一区二区三区 | 亚洲一二视频 | 99久久精品无免国产免费 | 亚洲三级在线 | 91国产精品 | 伊人网站 | 日韩高清一区 | 日本二区在线观看 | 国产乱视频网站 | 日韩二区精品 | 日本在线色 | 国产成人在线播放 | 国产精品久久久久久 | 欧美一级在线 | 欧美亚洲视频在线观看 | 日韩精品一区二区三区在线 | 欧美成人一区二区三区片免费 | 亚洲无线视频 | 国产成人精品一区一区一区 | 黄网站在线播放 | 久久精品欧美一区二区三区麻豆 | 成人午夜精品一区二区三区 | 在线天堂新版最新版在线8 久久亚洲欧美日韩精品专区 | 欧美激情精品久久久久久变态 | 蜜桃中文字幕 | 成人黄色在线视频 | 少妇被粗大的猛烈进大胸视频 | 国产成人精品免高潮在线观看 | 欧美综合激情 | 日韩电影免费在线观看中文字幕 | 日本在线一二 | 天天看天天摸天天操 | 午夜精品一区二区三区在线 | 黄色一级片在线看 | 精品99久久久久久 | 免费看的黄色小视频 | 精品在线一区二区三区 | 特级毛片在线 | 中文字幕av高清 |