虛擬DOM, 常常出現的名詞

七七八八，模模糊糊，每週一個知識點總結開始記錄，今天來記錄下虛擬DOM這個知識點

List1: 什麼是虛擬DOM？

ta是一個對象，一個模擬DOM樹的對象，包含了 tag、props、children 三個屬性

<div id="app">
  <p class="text">hello world!!!</p>
</div>

上面的HTML轉換成虛擬DOM以下：

{
  tag: 'div',
  props: {
    id: 'app'
  },
  chidren: [
    {
      tag: 'p',
      props: {
        className: 'text'
      },
      chidren: [
        'hello world!!!'
      ]
    }
  ]
}

 

List2: 他是用來解決什麼問題？

虛擬DOM是爲了解決瀏覽器性能問題而被設計出來。例如，咱們一個操做中有3次更新DOM的操做，此時虛擬DOM不會當即操做DOM進行頁面更新，而是將這三次更新的內容保存到本地的JS對象上，最後將這個對象一次性更新到真實的DOM樹上，交由瀏覽器去繪製，這樣以此避免了大量無謂的計算。

補充：不少人認爲虛擬 DOM 最大的優點是 diff 算法，減小 JavaScript 操做真實 DOM 的帶來的性能消耗。雖然這是虛擬 DOM 帶來的一個優點，但並非所有。虛擬 DOM 最大的優點在於抽象了本來的渲染過程，實現了跨平臺的能力，而不單單侷限於瀏覽器的 DOM，能夠是安卓和 IOS 的原生組件，能夠是近期很火熱的小程序，也能夠是各類GUI。（抄來的，最大優點那塊暫時理解不是很透徹）

 

List3: 稍等，弱弱問句爲啥操做DOM性能開銷大le？

其實不是查詢DOM樹開銷大，而是DOM樹模塊與JS模塊是分開的, 這些模塊間的通信增長了開銷。再加上操做DOM會致使頁面重繪or迴流, 使得性能開銷巨大，在當今移動端吃香的天下，而手機性能良莠不齊，性能問題就顯得尤其突出。

 

List4: 那虛擬DOM是怎樣提高性能的le?

DOM發生變化時，經過diff算法比對JavaScript原生對象，計算出須要變動的DOM,而後只對變化的DOM進行操做，而不是更新整個視圖

 

List5: 那麼如何將HTML轉換成虛擬DOM le？

觀察現今主流的虛擬DOM庫snabbdom、virtual-dom， 一般都有一個h函數，也就是 React 中的 React.createElement，以及 Vue 中的 render 方法中的 createElement。而React 是經過 babel 將 jsx 轉換爲 h 函數渲染的形式，而 Vue 是使用 vue-loader 將模版轉爲 h 函數渲染的形式，整個h函數返回的就是虛擬DOM的對象

TO DO: 後續還將涉及diff算法，後面再次補上

參考資料：

1) https://juejin.im/post/5c051597e51d45517b0cf7e6 (什麼是虛擬DOM)

2) https://efe.baidu.com/blog/the-inner-workings-of-virtual-dom/ (Vitual DOM的內部工做原理)

3) http://www.javashuo.com/article/p-rikwcfke-ew.html (虛擬DOM究竟是什麼)

4) http://www.javashuo.com/article/p-nyixqszc-hg.html(深刻剖析：Vue核心之虛擬DOM)