Web组件渲染性能

Question

与本机HTML元素相比，Web组件是否提供更好的性能？由于每个元素只有在连接到DOM时才会发生变化。因此，在Element回调内部进行昂贵的操作会导致较差的性能。

我在connectedCallback句柄中编写了一个带有一些昂贵实现的示例Web组件，当我尝试渲染该组件时，每个组件都花费了连续的时间。

我在Web Components上看不到任何与引用相关的性能引脚点。

---

更新1

我有本地和Web组件实现创建的小网页，似乎Web组件页面花了4毫秒来完成，但本机只花了1毫秒。请参阅我的演出屏幕。在Web组件脚本中占用更多时间。

本地HTML例子：

---

Web组件实例：

Answer 1

由于自定义元素扩展了原生HTML元素（通过class extends HTMLDivElement），并添加了额外的功能，所以我会说：在最好的情况下，它们只能和原生HTML元素一样好。

与第三方框架（不支持这项新技术）相比，性能的提高是：Web组件应该更快。

您可以在比较本机和填充的自定义元素实现时看到它。

Answer 2

您可以使用StencilJS（github）大大提高Web组件的性能。它将很容易地完成很多优化工作，并且为您的Web组件实现一个虚拟DOM以实现最佳渲染。

您可以查看演出here。