曾經一度以為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
将兩個項目的頁面内容都改為
Hello World
， 使用Chrome的Light House插件，選擇Mobile -> Performance
運作結果如下：
可以明顯看出Stencil的Performance優于React。這也是顯然的結果，Stencil直接調用了浏覽器的Web Component，不用執行複雜的虛拟Dom算法，執行效率當然更高。
後續我們再看Stencil的其他性能名額，比如SSR，PWA，導出獨立的元件等。