資訊專欄INFORMATION COLUMN
,
在react當中虛擬DOM可以說優(yōu)化了很多我們對真實DOM的操作，優(yōu)化了性能。 什么是虛擬DOM？vdom可以看作是一個對象，使用javascript模擬了DOM結(jié)構(gòu)的樹形結(jié)構(gòu)，這個樹結(jié)構(gòu)包含整個DOM結(jié)構(gòu)的信息；
html：
`
`
["div", { class: "demo" }, ["span", {}, "123"]]
`
思考一：
1. 生成state 數(shù)據(jù)； 2. 解析jsx模版； 3. 數(shù)據(jù) + 模版 生成真實DOM顯示出來； 4. state 發(fā)生變化； 5. 數(shù)據(jù) + 模版 生成真實DOM替換到原有DOM；
缺點：
生成了2次DOM模版，數(shù)據(jù)發(fā)生變化將原有DOM整個替換掉；
思考二：
1. 生成state數(shù)據(jù)； 2. 解析jsx模版； 3. 數(shù)據(jù) + 模版生成真實DOM顯示出來； 4. state 發(fā)生變化； 5. 數(shù)據(jù) + 模版 生成真實DOM 并不替換原有DOM；？。，m n 6. 在內(nèi)存中將新DOM（DocumentFragment）與原始DOM，做對比，找差異； 7. 找出對應(yīng)的發(fā)生了變化； 8. 用新DOM對應(yīng)的位置替換掉原始DOM發(fā)生變化的地方；
缺點：
雖然節(jié)約了整個替換的性能，但是也多了很多步驟，并且損耗了內(nèi)存中做DOM比對的性能；在性能提升 上并沒有得到多大的提升；
思考三：
1. 生成state數(shù)據(jù)； 2. 解析jsx模版； 3. 數(shù)據(jù) + 模版生成真實DOM顯示出來； 4. 數(shù)據(jù) + 模版生成原始虛擬DOM（Json），來表述真實DOM； 5. state 發(fā)生變化； 6. 數(shù)據(jù) + 模版生成新的虛擬DOM， 7. 對比原始虛擬DOM與新的虛擬DOM的差異； 8. 操作真實DOM，將差異部分進行修改；為什么react當中的虛擬DOM可以提高性能呢？
主要是因為減少了對真實DOM的操作，以及真實DOM的對比，取而代之的是用js對象的對比，這樣實現(xiàn) 了性能的極大的飛躍。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105460.html
摘要：比較虛擬與的差異，以及對節(jié)點的操作，其實就是樹的差異比較，就是對樹的節(jié)點進行替換。忽略掉這種特殊的情況后，大膽的修改了算法按直系兄弟節(jié)點比較比較。這當中對比的細節(jié)才是整個算法最精粹的地方。 一、舊社會的頁面渲染 ???????在jQuery橫行的時代，F(xiàn)Eer們，通過各種的方式去對頁面的DOM進行操作，計算大小，變化，來讓頁面生動活潑起來，豐富的DOM操作，讓一個表面簡單的頁面能展示出...
摘要：表示調(diào)用棧在下一將要執(zhí)行的任務(wù)。兩方性能解藥我們一般有兩種方案突破上文提到的瓶頸將耗時高成本高易阻塞的長任務(wù)切片，分成子任務(wù)，并異步執(zhí)行這樣一來，這些子任務(wù)會在不同的周期執(zhí)行，進而主線程就可以在子任務(wù)間隙當中執(zhí)行更新操作。 showImg(https://segmentfault.com/img/remote/1460000016008111); 性能一直以來是前端開發(fā)中非常重要的話題...
摘要：單向數(shù)據(jù)流應(yīng)用的核心設(shè)計模式，數(shù)據(jù)流向自頂向下我也是性子急的人，按照技術(shù)界的慣例，在學習一個技術(shù)前，首先得說一句。然而的單向數(shù)據(jù)流的設(shè)計讓前端定位變得簡單，頁面的和數(shù)據(jù)的對應(yīng)是唯一的我們可以通過定位數(shù)據(jù)變化就可以定位頁面展現(xiàn)問題。 書籍完整目錄 1.1 React 介紹 showImg(https://segmentfault.com/img/bVvJgS); 1.1.1 React ...
閱讀 2277·2021-11-25 09:43
閱讀 3152·2021-10-14 09:42
閱讀 3500·2021-10-12 10:12
閱讀 1584·2021-09-07 10:17
閱讀 1916·2019-08-30 15:54
閱讀 3199·2019-08-30 15:54
閱讀 1572·2019-08-30 15:53
閱讀 1935·2019-08-29 11:21
