Web组件渲染性能

Question

Web组件与原生HTML元素相比，是否具有更好的性能？由于每个元素只在附加到DOM时发生变异，因此在元素回调中进行昂贵操作会导致性能下降。我编写了一个带有一些昂贵实现的示例Web组件，在尝试渲染组件时，每个组件都按顺序花费时间。我没有看到任何与Web组件相关的性能问题参考。

---

更新1

我创建了一个包含原生和Web组件实现的小页面，似乎Web组件页面需要4毫秒才能完成，而原生只需要1毫秒。请参考我的性能屏幕截图。在Web组件中，脚本执行需要更多时间。

原生HTML示例：

---

Web组件示例：

- john

---

什么问题？ - Andrei Nemes

@AndreiNemes：与原生HTML元素相比，Web组件是否提供更好的性能？ - john

渲染“Hello world”是一个相当糟糕的测试，但人们会期望原生元素在像这样简单的东西上显然更快地渲染。 - StefanBob

Answer 1

由于自定义元素是通过 class extends HTMLDivElement 扩展本机HTML元素的，再添加额外功能，因此我认为：在最好的情况下，它们只能像本机HTML元素一样好。

性能上的提升是与第三方框架（不利用这种新技术）相比较时获得的：Web组件应该更快。

可以通过比较本机和填充自定义元素实现来看到它。

- Supersharp

Answer 2

您可以使用 StencilJS（GitHub）来大大提高您的网络组件性能。它可以轻松地完成许多优化工作，并为您的网络组件实现虚拟DOM，以获得最佳渲染效果。

您可以在 此处 检查性能。

- glemiere

---

我只想知道Web组件相对于本地应用程序而言性能较慢的所有原因。 - john

主要是因为代码在虚拟机中执行，所以它比直接由CPU处理的本地代码更高级。 - glemiere

Answer 3

由于 Web Components 对原生 HTML 元素进行了实现，增加了一层“复杂性”，因此原生 HTML 元素将始终是胜者。

我个人认为，Web Components 的引入并不是为了超越原生 HTML 元素（就像 Angular、React 和 Vue 等 JavaScript 框架一样），而是为了方便开发人员并使其更轻松地编写代码。在网站开发中，可读性是非常重要的，这可以通过 Web Components 大大提升。

在我看来，更好的比较方式是比较原生 HTML 元素和 Web Components 在支持开发人员编写更可读代码和提高生产力方面的程度。

- StefanN

Answer 4

我在思考，如果你只是简单地做一个“Hello World”，当然原生元素会胜出，因为它不需要JS来工作，而自定义元素需要JS来定义和启动文本的渲染。

现在，更好的比较是，假设使用相同的代码库，您使用JS和原生元素创建一个走马灯，以及一个自定义元素作为走马灯。那么我认为渲染性能将是相等的。我唯一能想到使用自定义元素而不是通过JS操作本机元素的优点是，您可以在任何地方重复使用自定义标记，并且它将作为走马灯工作，而不是当您仅使用本机元素创建每个走马灯div时必须使用new Carousel(document.querySelector('.carousel'))。

- TJ Monserrat