Web 组件渲染性能

Question

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

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

我在 Web Components 上没有看到任何与参考相关的性能指标。

---

更新 1

我创建了一个带有 Native 和 Web Component 实现的小页面，似乎 Web Components 页面需要 4ms 才能完成，但 Native 只需要 1ms。请参阅我的性能屏幕。在 Web 组件中，脚本编写需要更多时间。

原生 HTML 示例：

---

Web 组件示例：

Answer 1

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

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

在比较原生与填充自定义元素实现时，您可以看到它。

Answer 2

您可以使用StencilJS ( github )极大地提高 Web 组件的性能。它将非常轻松地完成大量优化工作，并为您的 Web 组件实现虚拟 DOM 以实现最佳渲染。

您可以在这里查看表演。

Answer 3

原生 HTML 元素将永远是赢家，因为 Web 组件正在实现它们，这增加了额外的“复杂性”层。

我个人并不认为 Web 组件的引入优于原生 HTML 元素（对于 Angular、React 和 Vue 等 Js 框架也可以这么说）。我认为它们是为了方便而设计的，是为了让开发人员的生活更加轻松。由于我们是为人类编写代码，其次是为计算机编写代码，因此 Web 开发的一个重要方面是可读性，而通过 Web 组件可以极大地提高可读性。

恕我直言，原生 HTML 元素和 Web 组件之间更好的比较是它支持开发人员编写更具可读性的代码并提高工作效率的程度。