6

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

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

我在 Web 组件上看不到任何与参考相关的性能指标。

更新 1

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

本机 HTML 示例：

本机示例

Web 组件示例：

在此处输入图像描述

4

4 回答 4

6

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

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

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

于 2017-09-27T11:40:50.920 回答
5

您可以使用StencilJS ( github )大大提高 Web 组件的性能。它将很容易地进行大量优化工作，并为您的 Web 组件实现一个虚拟 DOM 以获得最佳渲染。

你可以在这里查看表演。

于 2018-02-13T01:45:44.320 回答
3

我在想，如果你只是简单地做一个简单的“Hello World”，当然 Native Elements 将是赢家，因为它不需要 JS 工作，而 Custom Elements 需要 JS 来定义和启动文本的渲染。

现在，一个更好的比较是，假设使用相同的代码库，您只使用 JS 和 Native 元素创建一个轮播，以及一个作为轮播的自定义元素。然后我认为渲染性能会是相等的。我能想到的使用自定义元素而不是通过 JS 操作本机元素的唯一优势是，您可以在任何地方重用自定义标签，它将作为轮播，而不是必须new Carousel(document.querySelector('.carousel'))在您创建的每个轮播 div 上使用仅使用本机元素。

于 2018-05-12T03:42:52.710 回答
2

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

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

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

于 2019-04-26T13:37:11.863 回答