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