javascript - Web Components 渲染性能

Question

与原生 HTML 元素相比，Web 组件是否提供更好的性能。因为每个元素只有在附加到 DOM 时才会发生变化。因此，元素回调中的昂贵操作会导致性能不佳。

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

我在 Web 组件上没有看到任何与引用相关的性能针点。

---

Update 1

I have a created small page with Native and Web Component implementation, Seems Web Components page took 4ms to finish but Native took only 1ms. Refer my Performance screens. In Web Components scripting is taking more time.

Native HTML Example:

---

Web Component Example:

Answer 1

由于自定义元素扩展了原生 HTML 元素(通过 class extends HTMLDivElement)，添加了额外的功能，我想说:在最好的情况下，它们只能和原生 HTML 元素一样好。

性能提升是与第 3 方框架(不利用这项新技术)相比:Web 组件应该更快。

您可以在比较原生自定义元素与 polyfilled 自定义元素实现时看到这一点。