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

提供：Dev Guides
移動先:案内、検索

フロントエンド開発コミュニティでは、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です。 これを行うために、Lighthouseレポートを実行しましたが、これは5000ムービーを処理できなかったため、このテストのために、ムービーの数を500に移動しました。

上記からわかるように、パフォーマンスは良くありません。これは5000ではなく、500ムービーの場合であることを覚えておいてください。

反応ウィンドウの実装

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>

AutoSizerコンポーネントは、heightおよびwidthをListコンポーネントに渡すことにより、Rowコンポーネントの寸法をコンテナに自動的にスケーリングします。 静的な値をheightおよびwidthプロップに渡すこともできます。

AutoSizerをインストールするには、npm install react-virtualized-auto-sizerを実行してから、以下をインポートします。 

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

リストコンポーネント

Listコンポーネントは非常にシンプルです。ご覧のとおり、itemDataという小道具があり、すべての5000ムービーを渡します。これにより、 Rowコンポーネント。 

const movie = data[index];

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

Listコンポーネントは、デフォルトでstyleおよびindexプロップをRowコンポーネントに渡します


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

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

最初はパフォーマンスで63を獲得しましたが、現在は100を獲得しています。 First Meaningful Paintは、react-windowなしの4.8sと比較して、1.1sのみを使用しました。 また、この監査は、最初の監査が実行された500ではなく、5000ムービーに対して実行されたことを忘れないでください。

まとめ

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

「https://www.finddevguides.com/index.php?title=反応ウィンドウでグリップを取得する&oldid=100400」から取得
Powered by MediaWiki