Web元件 - Stencil與React，效能比較
阿新 • • 發佈：2021-11-03
曾經一度以為React已經是前端框架的極致，直到看到了Stencil。 給人的感覺不亞於用慣了jQuery之後突然看到React。這就是所謂的降維打擊，或者說玩法不同吧。
直接操作DOM的框架裡面，jQuery做到了極致，然而React搞了個虛擬Dom。Stencil乾脆用起了Web Component，瀏覽器原生功能，直接跳過了虛擬Dom。
回到正題，Stencil和React的效能差別到底如何呢？ 我們做個簡單的對比，都用各自官網的腳手架做個Hello World.
Stencil
mkdir stencil-demo
npm init Stencil
npm run start
React
npx create-react-app react-demo
npm run start
將兩個專案的頁面內容都改為
Hello World
， 使用Chrome的Light House外掛，選擇Mobile -> Performance執行結果如下：
Stencil
React
可以明顯看出Stencil的Performance優於React。這也是顯然的結果，Stencil直接呼叫了瀏覽器的Web Component，不用執行復雜的虛擬Dom演算法，執行效率當然更高。
後續我們再看Stencil的其他效能指標，比如SSR，PWA，匯出獨立的元件等。