渲染原理： 虛擬dom + diff演算法， 實現按需更新，提升dom更新效率

一： 什麼是虛擬dom，一個js物件，用js物件來模擬一個真實dom；

虛擬dom工作流：

1-  根據初始dom生成舊虛擬dom： oldVnode，  缺點一：所以首屏載入會慢一些

2- 根據修改後的dom結構生成一個新的虛擬dom： newVnode     缺點二：新的虛擬dom幾乎都變更了，diff演算法執行就無意義的浪費時間

3- diff演算法對比： 找出需要變更的dom， 執行渲染

     a：參考diff演算法實現原理

二：瀏覽器渲染原理

1-  重排： 那張圖

1-  重繪：搞一張圖，流程

1-  js單執行緒， 瀏覽器多執行緒；  

1-  每一次事件迴圈後，瀏覽器都會有一個ui渲染過程；  觸發的dom操作都會放到非同步忍睹佇列

     瀏覽器做了優化，一段時間內頻繁的觸發dom操作不會立即執行，60hz的頻率去更新檢視；  但還是難免有一定次數的重排；    所以用虛擬dom來做一次優化，無論多少次更改，都會對映到新的虛擬dom上， 然後新舊虛擬dom的diff

     然後渲染，一次渲染就會操作一次真實的dom結構，從而減少了重排，提升頁面渲染效率；   還有虛擬dom是在記憶體中，操作記憶體在虛擬dom更快；記憶體中操作真實dom就慢？ 因為dom結構複雜？

1-  巨集任務、微任務

疑問：

1- 為啥要有虛擬dom，為啥不用真實dom物件

      a：因為真實dom屬性多？ 還有原型鏈？  體積大，  所以要簡化！！！   snabdom為啥出來？

      b：虛擬dom自定義，自定義靈活度高， 沒有侵入？

2- 舊虛擬dom啥時候生成的？  vue-template-compiler

      a：專案首次載入的時候， 頁面開啟的時候， 虛擬dom會快取不？ 瀏覽器頁籤切換的時候？

3- 瀏覽器渲染原理

4- jquery時代頁面渲染？  jquery專案前後端時代；  前後端分離時代

參考：

1- 微信收藏文章

2- vue原始碼

3- b站視訊