天天看点

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

将两个项目的页面内容都改为

Hello World

, 使用Chrome的Light House插件,选择Mobile -> Performance

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

运行结果如下:

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

可以明显看出Stencil的Performance优于React。这也是显然的结果,Stencil直接调用了浏览器的Web Component,不用执行复杂的虚拟Dom算法,执行效率当然更高。

后续我们再看Stencil的其他性能指标,比如SSR,PWA,导出独立的组件等。

继续阅读