Webコンポーネントレンダリングのパフォーマンス

Question

Webコンポーネントは、ネイティブHTML要素と比べてパフォーマンスが向上しますか。各要素はDOMにアタッチされるときにのみ変更されるからです。したがって、要素コールバック内の高価な操作はパフォーマンスが低下します。

高価な実装を備えたサンプルWebコンポーネントをconnectedCallbackハンドルに記述しました。コンポーネントをレンダリングしようとすると、各コンポーネントは連続した順序で時間がかかりました。

Webコンポーネントでは、参照関連のパフォーマンスピンポイントは表示されません。

---

アップデート1

私はネイティブおよびWebコンポーネントの実装を作成した小さなページを持っている、Webコンポーネントのページが終了する4msのを取ったが、ネイティブが唯一の1msを取ったようです。パフォーマンス画面を参照してください。 Webコンポーネントでは、スクリプト作成に時間がかかります。

ネイティブHTML例：

---

Webコンポーネントの例：

Answer 1

カスタム要素はネイティブHTML要素（class extends HTMLDivElement）を拡張しているため、特別な機能が追加されているので、最高の場合、ネイティブHTML要素と同じくらい良いものになります。

パフォーマンスの向上は、（この新しいテクノロジを活用していない）第三者のフレームワークと比較した場合です。Webコンポーネントの方が高速になるはずです。

ネイティブとポリ充てんされたカスタムエレメントの実装を比較するとわかります。

Answer 2

StencilJS（github）を使用すると、Webコンポーネントのパフォーマンスを大幅に向上させることができます。最適化作業を非常に簡単に行うだけでなく、Webコンポーネントに最適なレンダリング用の仮想DOMを実装することもできます。

パフォーマンスを確認してくださいhere