React rendering performance test

今回styled componentsを使用した場合、再表示されていることが確認されました.
ただしreactで再表示するのは、実際のブラウザで再表示するのとは異なります.
virtualdomに実際に変更された領域のみを再表示させます.
それでもreactからre-rendering領域をキャプチャすることは、関数を再実行するにつれて実行されるJavaScriptコードの量が増加することに相当する.
これが実際に性能にどのような違いがあるかをテストします.
適用前と適用後のパフォーマンスをテストしました.

改善前のコードを使用してテスト

クロム開発ツールReact Profiler

クロム開発者ツールのパフォーマンス

改良されたコードテスト

クロム開発ツールReact Profiler

クロム開発者ツールのパフォーマンス

比較と分析

前回の

で見たことがありますが、実際にブラウザでレンダリングされた部分に差はありません.

リアルレンダリングを表示

改良前のコードを使用して実際にレンダリング

改良されたコードの実際のレンダリング

しかし、性能テストを行うと、大きな違いが見つかります.
反応器で測定した場合は10倍ほど差があります.
ブラウザでパフォーマンステストを行う場合は、3～4倍の差があります.
60 Hz、16.7ミリ秒のフレーム周波数範囲で、
改善前のコードのレンダリング時間は、約47ミリ秒、約21 Hzと非常に遅い.
改良されたコードレンダリング時間は約11.3ミリ秒、約88 Hzであり、かなり柔らかい.
改良前のコードでusemoを使用する

          useMemo(() => {
            return lectureData.courseInfo?.category?.map((item) => (
              <CourseCommonButton
                key={item.id}
                id={item.id}
                text={item.name}
                selectedId={selectedCategoryId}
                setSelectedId={setSelectedCategoryId}
              />
            ));
          }, [lectureData.courseInfo?.category, selectedCategoryId])

userMemoを適用した部分は再レンダリングされず、レンダリング時間も短縮されました.

反応器:10 ms->6~8 msでやや減少した.

クロムショー:48 ms->31.4 ms

ヘッダーにUSMEMOは使用されていません.すべてのスタイルコンポーネントが適用されている部分でUSMEMOを使用すると、さらに減少します.

n/a.結論

レンダリング速度が遅いと感じて最適化する必要がある場合は、styled componentsを使用する場所ですべてuserMemoを使用するか、素子を分離する際にuserStateをできるだけ避けるか、userRefを使用することが望ましい.