燃費が気になって仕方なかった昨今、補助金パワーで安くなったのでぬくぬくと暮らしてます（駄文おわり）
最近、パフォーマンス計測をしていて得た知見を紹介します。
例えば React でリストを作っているときに、アイテム一覧を fetch して表示するような処理です。特定の処理にかかった時間がどれくらいかを知りたい。そういうシーンは多いと思います。
console.time('ユニークな名前');
// ... 計測対象の処理を書く ...
console.timeEnd('ユニークな名前');
console.time ~ console.timeEnd の範囲でかかった時間が取得できます。単位はミリ秒です。
ユニークな名前 と記載した箇所はユニークな文字列をキーとして、計測範囲を判定するために使われます（ブラウザで確認するときにも表示されます）
ブラウザのコンソールには、例えば下記のようなものが出力されます。
ユニークな名前: 0.030000000000 ms
下記のように fetch する処理を書くとわかりやすいかもしれません。記載するコードは詳細は省きますが、説明はできる程度のものです。
console.time("fetch にかかる時間");
const list = await fetch('~~~');
console.timeEnd("fetch にかかる時間");
return (
{list.map(({ title, description }, index) => (
<div key={index}>
<div>{title}</div>
<div>{description}</div>
</div>
))}
);
このように書いてブラウザで実行すると、コンソールに下記のようなメッセージが表示されているはずです。
fetch にかかる時間: 1000.000000000000 ms
このように、ユーザーの体感速度に影響の大きいものを測って説明できれば、仕事を増やす（？）ことができますね。
今日はここまで。読んでくださってありがとうございます。