Web組件渲染性能

Question

與本機HTML元素相比，Web組件是否提供更好的性能？由於每個元素只有在連接到DOM時纔會發生變化。因此，在Element回調內部進行昂貴的操作會導致較差的性能。

我在connectedCallback句柄中編寫了一個帶有一些昂貴實現的示例Web組件，當我嘗試渲染該組件時，每個組件都花費了連續的時間。

我在Web Components上看不到任何與引用相關的性能引腳點。

---

更新1

我有本地和Web組件實現創建的小網頁，似乎Web組件頁面花了4毫秒來完成，但本機只花了1毫秒。請參閱我的演出屏幕。在Web組件腳本中佔用更多時間。

本地HTML例子：

---

Web組件實例：

Answer 1

由於自定義元素擴展了原生HTML元素（通過class extends HTMLDivElement），並添加了額外的功能，所以我會說：在最好的情況下，它們只能和原生HTML元素一樣好。

與第三方框架（不支持這項新技術）相比，性能的提高是：Web組件應該更快。

您可以在比較本機和填充的自定義元素實現時看到它。

Answer 2

您可以使用StencilJS（github）大大提高Web組件的性能。它將很容易地完成很多優化工作，並且爲您的Web組件實現一個虛擬DOM以實現最佳渲染。

您可以查看演出here。