反応ウィンドウでグリップを取得する
フロントエンド開発コミュニティでは、私たちはこの言葉を使う傾向があります 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
は。 私たちのアプリケーションは非常に単純なものでしたが、それでもパフォーマンスに大きなメリットがあります。 この記事から何かを学び、パフォーマンス目標の達成に近づいていることを願っています。