https://github.com/tetracalibers/parse-chrome-performance-profile

Chromeのパフォーマンス計測で取得できるProfile.jsonの解析スクリプト
https://github.com/tetracalibers/parse-chrome-performance-profile

Last synced: 11 days ago
JSON representation

Chromeのパフォーマンス計測で取得できるProfile.jsonの解析スクリプト

• Host: GitHub
• URL: https://github.com/tetracalibers/parse-chrome-performance-profile
• Owner: tetracalibers
• Created: 2023-02-17T23:52:49.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-18T03:49:27.000Z (almost 2 years ago)
• Last Synced: 2024-11-07T21:20:03.841Z (2 months ago)
• Language: JavaScript
• Size: 45.9 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# parse Chrome Performance Profile

Chromeのパフォーマンス計測で取得できるProfile.jsonを解析し、CSSのレンダリング各フェーズごとにかかっている時間を抽出するスクリプト。

## ディレクトリ構成

- `dump`：抽出結果JSON置き場

- `data`：解析対象のProfile.json置き場

- `script`：解析スクリプト置き場

## parse-animation.js

アニメーション記録が含まれるProfile.jsonを解析し、アニメーションに伴う再レンダリング時間を抽出するスクリプト。

### 実際の測定結果例

- [背景スライドアニメーションの比較](/dump/animation/flow-bg)

- [box-shadowアニメーションの比較](/dump/animation/box-shadow)

- [blurアニメーションの比較](/dump/animation/blur)

- [移動アニメーションの比較](/dump/animation/move)

### Profile.jsonの取得方法

1. 計測したいアニメーションを実行するページをChromeで開く

2. devToolsのパフォーマンスタブを開く

3. `command + E`で測定開始

4. hover等でアニメーション実行

5. `command + E`で測定終了

6. プロファイルを保存

![Chrome開発者ツールのパフォーマンスタブにあるプロファイル保存ボタンのスクショ](/images/chrome-save-profile.png)

### スクリプトの実行方法

1. `data/animation`配下にProfile.jsonを設置

2. （初回のみ）`yarn`で依存をインストール

3. `yarn parse:animation`を実行

4. `dump/animation`内に解析結果が出力される

### 使用上の注意

現時点では、複数回のアニメーション実行が含まれるProfile.jsonには対応していません。

transitionの往復も2回としてカウントされるため、次のように、transitionの実行は片方向だけの状態で測定してください。

```css

.target {

  width: 0;

  /** 元に戻る際のアニメーションはなし */

  transition: none;

}

.target:hover {

  width: 100%;

  transition-property: width;

  transition-duration: 0.5s;

  transition-timing-function: ease-out;

}

```