私は最近 Material UI を使い始めたのですが、コンポーネントのスタイル設定に CSS in JS 方式を使用していることは知っています。
スタイルの作成方法に関するドキュメントには、次の 2 つの方法が記載されていました。
プロップの使用sx:
<Box sx={{ backgroundColor: 'green' }}/>
このmakeStyles方法を使用する:
makeStyles({
root: {
backgroundColor: 'green'
}
})
JS の CSS はネイティブ CSS よりもパフォーマンスがはるかに劣ることはわかっています。
しかし、私が今書いた 2 つの方法のうち、どちらがよりパフォーマンスが高いでしょうか (ある場合)?
ちなみに、私はMaterial UIバージョン5を使用しています。これは、JSSの代わりに感情を表現すると全体的にパフォーマンスが向上すると言われています。
ベストアンサー1
静的スタイル (つまり、プロパティに基づいて動的ではないスタイル) の場合、JSS は Emotion よりもわずかに高速です。動的スタイルの場合、JSS は Emotion よりもはるかに低速です。Emotion は静的スタイルと動的スタイルの両方で同様のパフォーマンスを発揮します。
JSS と Emotion の静的スタイルのパフォーマンスの違いに関する情報は、次の号で確認できます。
- https://github.com/mui-org/material-ui/issues/22342#issuecomment-696553225
- https://github.com/mui-org/material-ui/pull/22173#issuecomment-673486269
JSSは静的スタイルではEmotionより約10%高速でした。動的スタイルでは、JSSはEmotionより6倍遅かったMaterial-UI チームが実行したあるテストでは、JSS が v5 の可能なスタイリング エンジンのリストから除外されたためでした。
ドキュメントhttps://next.material-ui.com/system/basics/#the-sx-prop次のパフォーマンス情報が含まれます。
| ベンチマークケース | コードスニペット | 時間を正規化 |
|---|---|---|
| a. 1,000個のプリミティブをレンダリングする | <div className="…"> |
100ミリ秒 |
| b. 1,000個のコンポーネントをレンダリングする | <Div> |
120ミリ秒 |
| c. 1,000個のスタイル付きコンポーネントをレンダリングする | <StyledDiv> |
160ミリ秒 |
| d. 1,000ボックスをレンダリング | <Box sx={…}> |
370ミリ秒 |
Emotionを直接使用した場合のパフォーマンス（スタイルのあるアプローチまたはCSSプロパティ）はベンチマークケースと同様であるcmakeStyles静的スタイルはそれよりわずかに速くなると予想されますが(140 ミリ秒から 150 ミリ秒の範囲)、それほど大きな差はありません。sxプロパティが著しく遅いことがわかりますが、200 ミリ秒の余分なオーバーヘッドは 1,000 要素に対して発生するため、追加のオーバーヘッドはレンダリングされるコンポーネントごとに 5 分の 1 ミリ秒に過ぎないことに留意してください。プロパティによって追加されるオーバーヘッドの量は、sxプロパティに渡す CSS プロパティの数によって異なります。プロパティの数が少ない (5 未満) 場合、との違いはstyled上記sxの表に示されているほど大きくありません。
Material-UI が、全体的に v5 が v4 よりも高速であると主張しているのを見た記憶はありません。v5 では、JSS を使用して実装すると (動的スタイルを活用するため) ひどく遅くなるであろう多くの新機能が追加されているため、スタイリング パフォーマンスを v4 と同等に保ちながら、それらの機能を追加することができました。
Material-UI v5を使用する最大の欠点は、makeStylesユーザーにバンドルの一部としてJSSとEmotionの両方をダウンロードさせる必要があることです。v4で構築された既存のアプリケーションがあり、すでにmakeStyles多くのものを使用している場合（現在v5に移行中）、移行オプションの1つは次のとおりです。tss-反応は と同様の構文を保持していますmakeStylesが、JSSではなくEmotionによってサポートされており、styledAPIと同様のパフォーマンスを備えています。コードモッドJSS スタイルを に移行しますtss-react。