Web组件 - Stencil与React，性能比较

曾经一度以为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，导出独立的组件等。