反応ウィンドウでグリップを取得する

投稿日: 2022-04-20 2022-10-06
タグ: React

フロントエンド開発コミュニティでは、私たちはこの言葉を使う傾向があります performance かなりたくさん。私たちは皆、パフォーマンスの高いアプリケーションを持つという共通の目標を持っています。ブライアン・ヴォーンが開発 react-window これを念頭に置いて、彼はこの目標を達成するための強力なツールを私たちに提供するという素晴らしい仕事をしました。

反応ウィンドウの背後にある理論

react-window 理論的には、理解するのは非常に簡単です。ウィンドウは、ユーザーが見ることができるビューを指します。

react-window ユーザーが見ることができない領域をレンダリングするリソースをわざわざ使用するのはなぜですか？それは純粋な愚かさです！

実用的になりましょう

実際のアプリケーションがなければ、アプリケーションのプロファイルを作成するのは非常に難しいのではないでしょうか。映画の大規模なリストを取得するアプリケーションを作成しました。ここでリポジトリを確認できます。

実行するだけです npm install その後 npm start 、次のように表示されます。 localhost:3000

初期測定

次のコードは movie-list.js 取得します5000 私たちの大きな反応からの映画：

const moviesList = movies.slice(0, 5000);

使用します 5000 サンプルサイズはかなり分厚いので、レンダリングには時間がかかります。

最初のパフォーマンスを測定することから始めます。最初に測定するのは、1秒あたりのフレーム数です（FPS). Chrome DevToolsでこれを有効にするには、他のツールをクリックしてからレンダリングすることにより、レンダリングをオンにする必要があります。

私たちの Frame Rate にあります 34.0 fps かなり遅いですが、私たちは周りで何かを達成することをもっと探しています 60fps.

次に測定するのは First Meaningful Paint. これを行うために、私は灯台レポートを実行しましたが、これは処理できませんでした 5000 映画なので、このテストのために、映画の数をに移動しました 500

上記からわかるように、パフォーマンスは良くありません。 500 映画ではなく 5000.

反応ウィンドウの実装

と呼ばれる新しいブランチですべてのパフォーマンスのアップグレードを行います performance-increased、これは、リポジトリのクローンを作成すると、アプリケーションの速度が低下することを意味します。 master ブランチして、両方を切り替えて違いを確認できます。

実装する react-window、最初に実行してインストールする必要があります npm install react-window、次にインポート FixedSizeList.

import { FixedSizeList as List } from 'react-window';

行の作成

で作業するには List コンポーネント、作成する必要があります Row そのようなコンポーネント：

// all props are passed by the List component
const Row = ({ index, style, data }) => {
  const movie = data[index];
  // style is passed by the List component to give our Row the correct dimensions
  return (
    <div style={style} key={index}>
      <Movie key={index} {...movie} />
    </div>
  );
};

私たちは入りません Movie コンポーネントは関係ありませんが、基本的には各映画のビューです。

AutoSizerコンポーネント

私たち Row コンポーネントが作成されたら、実装できます List ラップするコンポーネント AutoSizer 成分：

<AutoSizer>
  {({ height, width }) => (
    <List
      className="List"
      height={height}
      itemCount={1000}
      itemSize={150}
      width={width}
      itemData={moviesList}
    >
      {Row}
    </List>
  )}
</AutoSizer>

The AutoSizer コンポーネントは自動的にスケーリングします Row コンポーネントの寸法をコンテナに渡すには、 height と width 私たちに List 成分。静的な値をに渡すこともできます height と width 小道具。

インストールするには AutoSizer、走る npm install react-virtualized-auto-sizer 次にインポートするには：

import AutoSizer from 'react-virtualized-auto-sizer';

リストコンポーネント

The List ご覧のとおり、コンポーネントは非常に単純です。 itemData 私たちはすべてを渡します 5000 映画これにより、私たちの個々の映画にアクセスすることができます Row 成分。

const movie = data[index];

The itemSize propは各行の高さです。残りの小道具は非常にシンプルです。

リストコンポーネントは、 style と index 私たちへの小道具 Row デフォルトのコンポーネント

すべてが整ったので、私たちをチェックしてみましょう FPS メーター。今回は私たちの目標にはるかに近いです 60fps.

リポジトリのクローンを作成して2つのブランチを比較した場合は、最初のレンダリングがどれだけ速いかもわかります。これを証明するために、別の監査を実行してみましょう。

最初に得点しました 63 私たちのパフォーマンスでは、しかし今私たちは得点しました 100. 私たちの First Meaningful Paint だけ取った 1.1s、に比べ 4.8s それなし react-window. また、この監査はに対して実行されたことを忘れないでください 5000 映画ではなく 500 最初の監査が実行されました。

まとめ

あなたは上からどれだけ強力であるかを見ることができます react-window は。私たちのアプリケーションは非常に単純なものでしたが、それでもパフォーマンスに大きなメリットがあります。この記事から何かを学び、パフォーマンス目標の達成に近づいていることを願っています。

getdocs

13036