Web组件呈现性能

Question

与Native HTML元素相比，Web Components是否提供更好的性能。因为每个元素只有在连接到DOM时才会变异。因此，Element回调中的昂贵操作会导致性能不佳。

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

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

  

更新1

     

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

     

原生HTML示例：

     

  

网络组件示例：

     

Answer 1

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

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

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

Answer 2

您可以使用 StencilJS （github）极大地改善网络组件的效果。它可以非常轻松地完成大量优化工作，并为您的Web组件实现Virtual DOM以实现最佳渲染。

您可以查看效果here 。

Answer 3

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

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

Answer 4

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

我个人认为Web组件的性能不超过本机HTML元素（对于Angular，React＆Vue之类的Js框架，您也可以说出同样的意思）。我认为它们是为了方便起见，并且使开发人员的生活更加轻松。由于我们是在为人类和第二台计算机编写代码，因此Web开发的一个重要方面是可读性，而Web组件极大地提高了可读性。

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