vue3.0中的性能優化


 

1.重寫虛擬DOM (Virtual DOM Rewrite)

vue3.0將 vdom 更新性能由與模版整體大小相關提升為與動態內容的數量相關

 

2.優化插槽生成(Optimized Slots Generation)

在當前的 Vue 版本中,當父組件重新渲染時,其子組件也必須重新渲染。 使用 Vue 3 ,可以單獨重新渲染父組件和子組件。

 

3.靜態樹提升(Static Tree Hoisting)

使用靜態樹提升,這意味着 Vue 3 的編譯器將能夠檢測到什么是靜態組件,然后將其提升,從而降低了渲染成本。它將能夠跳過未整個樹結構打補丁的過程。

  

4.靜態屬性提升(Static Props Hoisting)

 Vue 3 將跳過不會改變節點的打補丁過程。

 

5.基於 Proxy 的觀察者機制

Object.defineProperty是一個相對比較昂貴的操作,因為它直接操作對象的屬性,顆粒度比較小。將它替換為es6的Proxy,在目標對象之上架了一層攔截,代理的是對象而不是對象的屬性。這樣可以將原本對對象屬性的操作變為對整個對象的操作,顆粒度變大。

javascript引擎在解析的時候希望對象的結構越穩定越好,如果對象一直在變,可優化性降低,proxy不需要對原始對象做太多操作。

 

6.使 Vue 更小(Tree Shaking)

Vue已經非常小了,在運行時(runtime)壓縮后大約 20kb 。 但我們可以期待它會變得更加小,新的核心運行時壓縮后大概 10kb 。 這將在很大程度上通過消除不使用的庫(也稱為Tree Shaking)來實現。 例如,如果您沒有使用 過渡(transition)元素,則不會包含它。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM