編程中永恒不變的兩大主題：效率和質(zhì)量
歷史背景：web開發(fā)幾個階段
石器時代
web頁面展示簡單的靜態(tài)圖文信息膜楷，那個時候還沒有FE(前端)柴底，通常是一個叫美工的妹子兼職陋守。javascript腳本做的做多的事情可能就是表單提交。青銅時代
大概2005年的時候捅膘，AJAX 大火翘地，你的網(wǎng)站沒有局部更新太low了申尤。
也是這個時候，前端這個職業(yè)開始萌芽衙耕。白銀時代
后續(xù)的幾年了昧穿，javascript如火如荼。AJAX大規(guī)模的普及橙喘，網(wǎng)站上各種炫酷的輪播时鸵，跑馬燈等特效開始出現(xiàn)。2006年jquery誕生厅瞎，開始了它將近10年的光輝之路饰潜。
2008年nodejs發(fā)布，它將在不久的將來將前端推進(jìn)全新的時代和簸。
同時彭雾，移動智能手機和桌面軟件開始流行，也為前端后面的方向快速發(fā)展埋下時代伏筆比搭。黃金時代
2012年左右Bankbone.js冠跷、Angularjs開始展露頭角，把其他軟件編程領(lǐng)域中編程模式帶到前端領(lǐng)域中身诺。前端已經(jīng)開始承擔(dān)越來越多的開發(fā)任務(wù)，代碼量和業(yè)務(wù)復(fù)雜度不斷增加抄囚。鉑金時代
2014年左右霉赡，伴隨著互聯(lián)網(wǎng)+的概念大行其道。React幔托、Vue等前端UI框架迅速爆紅穴亏，數(shù)據(jù)驅(qū)動蜂挪、前后端分離等理念得到越來越多青睞。
以上總結(jié)屬于個人的看法嗓化，肯定有失偏頗棠涮，但對于前端的職業(yè)化、規(guī)拇谈玻化严肪、工程化理解 影響不大。
前端開發(fā)越來越復(fù)雜谦屑。
什么是Virtual DOM
使用普通的javascript對象映射原生DOM Tree驳糯。
解決什么問題？
- 大型前端應(yīng)用中氢橙，大量的DOM操作變的難以維護(hù)：結(jié)合數(shù)據(jù)驅(qū)動UI 的思想酝枢，能夠很好的解耦數(shù)據(jù)和DOM 操作。
- 效率：能夠兼顧開發(fā)效率和維護(hù)成本（數(shù)據(jù)驅(qū)動視圖變化悍手，省去了手動的操作dom 的繁雜過程）的同時 保證一定的高效性（不一定比原生手寫dom更新操作 高效）
- 有Virtual DOM 這個脫離了DOM 接口的限制帘睦，使得跨平臺有了新的解決方案。理論上只要能夠?qū)崿F(xiàn)了Virtual DOM 標(biāo)準(zhǔn)的任何平臺（包含js解析引擎）都能運行javascript應(yīng)用坦康。
內(nèi)部技術(shù)原理
- 創(chuàng)建
virtual dom樹 - 比較兩樹官脓，找出更新點
經(jīng)常進(jìn)行的
DOM操作
① 替換節(jié)點
② 節(jié)點刪除
③ 新增節(jié)點
④ 屬性增刪改
⑤ 改變文本節(jié)點的內(nèi)容-
diff 算法過程
① 如果新節(jié)點 為空， 則 刪除節(jié)點
② 如果新老節(jié)點 都是文本節(jié)點涝焙， 替換文本內(nèi)容
③ 如果老節(jié)點為空卑笨，新節(jié)點不為空，則插入新節(jié)點
④ 如果新節(jié)點和老節(jié)點 類型不同仑撞，則替換
⑤ 如果新節(jié)點和老節(jié)點類型相同赤兴，就更新屬性，并且對齊子節(jié)點進(jìn)行對比隧哮。
⑥ 針對子節(jié)點比較的話桶良，使用key來進(jìn)行優(yōu)化， 參考：https://github.com/livoras/list-diff
- 更新操作
根據(jù)diff算法搜集的patchs,進(jìn)行對應(yīng)的更新操作沮翔。
源碼解讀
https://github.com/livoras/simple-virtual-dom/
JSX 語法
如果直接使用js來使用virtual dom 庫陨帆，效率和后期維護(hù)將非常困難。
前端開發(fā)人員書寫UI 界面 最熟悉的還是使用 html語法結(jié)構(gòu)采蚀，JSX 就非常棒了疲牵。
它允許我們像使用html那樣來實現(xiàn)UI界面，最終通過運行前編譯預(yù)處理成js代碼榆鼠，或者提供運行時解析器動態(tài)解析JSX 來達(dá)到正確運行的目的纲爸。
具體參考：https://facebook.github.io/jsx/
使用babel將jsx編譯成javascript virtual dom：
https://babeljs.io/docs/en/babel-plugin-transform-react-jsx/
參考
- https://www.w3cplus.com/javascript/understand-the-Virtual-DOM.html
- https://github.com/snabbdom/snabbdom
- Understanding the Virtual DOM
- Matt-Esch/virtual-dom
- https://github.com/livoras/simple-virtual-dom/
- https://facebook.github.io/jsx/
- https://babeljs.io/docs/en/babel-plugin-transform-react-jsx/
- 50行代碼實現(xiàn)Virtual DOM
- 如何實現(xiàn)一個 Virtual DOM 算法
- 網(wǎng)上都說操作真實 DOM 慢，但測試結(jié)果卻比 React 更快妆够，為什么
