Perfettoの使い方を簡単にまとめてみた/A brief summary of how to use Perfetto

(English below)

Perfettoは、Googleが開発したパフォーマンスツールで、ウェブページのレンダリングパフォーマンスを計測し、改善することができます。この記事では、Perfettoの使い方について、解説します。

Perfettoとは何か？
Perfettoは、Googleが開発したパフォーマンスツールで、ウェブページのレンダリングパフォーマンスを計測し、改善することができます。Perfettoは、Chrome DevToolsと同じように、Chrome ブラウザー上で動作します。ただし、Chrome DevToolsがウェブページのパフォーマンスを計測するために、ウェブページのフロントエンドコードにアクセスする必要があります。一方、Perfettoは、Chrome ブラウザー自体のパフォーマンスを計測するため、ウェブページのフロントエンドコードにアクセスする必要はありません。

Perfettoを使ってみよう

Perfettoを使って、ウェブページのレンダリングパフォーマンスを計測する方法を解説します。まずは、Perfettoのインストールから始めましょう。

Perfettoのインストール
Perfettoは、Chrome ブラウザーにデフォルトで組み込まれていますが、PerfettoのGUIを使用するには、Perfettoのパッケージをインストールする必要があります。

以下のコマンドを使用して、Perfettoのパッケージをインストールします。

npm install -g perfetto

次に、PerfettoのGUIを起動するために、以下のコマンドを実行します。

perfetto --http

このコマンドを実行すると、PerfettoのGUIが起動されます。ブラウザーでhttp://localhost:9001にアクセスすると、PerfettoのGUIが表示されます。

Perfettoでレンダリングパフォーマンスを計測する
PerfettoのGUIを使用して、ウェブページのレンダリングパフォーマンスを計測する方法を解説します。

Chrome ブラウザーを起動し、開発者ツールを起動します。
「Performance」タブをクリックし、レコーディングを開始します。
ウェブページを読み込みます。
レコーディングを停止し、PerfettoのGUIでレコーディングファイルを読み込みます。
レンダリングパフォーマンスの詳細を確認します。

上記の手順を詳しく説明します。

Chrome ブラウザーを起動し、開発者ツールを起動します。
Chrome ブラウザーを開き、開発者ツールを起動します。開発者ツールは、F12キーを押すか、Chromeメニューの「ツール」->「開発者ツール」をクリックして起動できます。
「Performance」タブをクリックし、レコーディングを開始します。
開発者ツールの「Performance」タブをクリックし、レコーディングを開始します。レコーディングを開始すると、Chrome ブラウザーがウェブページのパフォーマンスを計測し始めます。レコーディング中は、ウェブページ上で操作を行わないようにしてください。
ウェブページを読み込みます。
レコーディングを開始した後、ウェブページを読み込みます。ウェブページの読み込みが完了するまで待ってください。読み込みが完了すると、レコーディングが自動的に停止します。
レコーディングを停止し、PerfettoのGUIでレコーディングファイルを読み込みます。
ウェブページの読み込みが完了したら、レコーディングを停止します。レコーディングを停止するには、開発者ツールの「Performance」タブの右上にある「Stop」ボタンをクリックします。レコーディングファイルを読み込むには、PerfettoのGUIを開きます。ブラウザーでhttp://localhost:9001にアクセスすると、PerfettoのGUIが表示されます。PerfettoのGUIの左側にある「Open」ボタンをクリックし、レコーディングファイルを選択します。ファイルが読み込まれると、PerfettoのGUIにレンダリングパフォーマンスの詳細が表示されます。
レンダリングパフォーマンスの詳細を確認します。
PerfettoのGUIには、レンダリングパフォーマンスの詳細が表示されます。詳細には、ウェブページの読み込みにかかった時間や、ウェブページのレンダリングにかかった時間、ネットワークのレイテンシなどが含まれます。これらの詳細を確認し、ウェブページのパフォーマンスを改善するためのアクションプランを作成します。

Perfettoのコードを使用する

Perettoをコードから使用することもできます。以下は、Node.jsを使用してPerfettoを起動し、レコーディングを開始し、レコーディングファイルを保存するコード例です。

javascript

const perfetto = require('perfetto-protocol');
const perf = require('bindings')('perfetto_bindings');

const config = { duration: 10, // レコーディングの長さ（秒） buffersizekb: 1024, // バッファーサイズ（キロバイト） events: [ { name: 'sched/sched_switch', fields: ['next_comm', 'next_pid', 'prev_comm', 'prev_pid'], }, { name: 'gfx/compositor/frame', fields: ['frame_id', 'display_frame_count', 'flags', 'event_time_ns'], }, ], };

const traceConfig = perf.convertConfig(config);

perf.startTrace(traceConfig).then(async (writer) => { console.log('Recording...'); await new Promise*1; console.log('Stopped recording'); const trace = await writer.stop(); const data = Buffer.concat(trace).toString('base64'); console.log(`Trace data: ${data}`); });

このコードでは、perfetto-protocolおよびbindingsパッケージを使用しています。configオブジェクトは、レコーディングのパラメーターを定義しています。events配列は、取得するトレースイベントを指定します。この例では、sched/sched_switchイベントとgfx/compositor/frameイベントを取得します。

perf.convertConfig関数を使用して、configオブジェクトをPerfettoのトレース構成オブジェクトに変換し、perf.startTrace関数を使用して、トレースを開始します。writerオブジェクトは、レコーディングをストリーミングするために使用できます。

レコーディングを終了するには、writer.stop()を呼び出します。これにより、トレースデータがBufferの配列として返されます。Buffer.concat関数を使用して、トレースデータを単一のBufferに結合し、toString('base64')メソッドを使用して、トレースデータをBase64 エンコードします。

以上が、Perfettoの使い方についての説明です。ウェブページのパフォーマンス問題を解決するために、Perfettoを使用して、レンダリングパフォーマンスの詳細を確認することができます。また、Node.jsを使用してPerfettoをコードから使用することもできます。

====English translation====

Perfetto is a performance tool developed by Google to measure and improve web page rendering performance. This article explains how to use Perfetto.

What is Perfetto?
Perfetto is a performance tool developed by Google to measure and improve the rendering performance of web pages. perfetto runs on the Chrome browser, just like Chrome DevTools. However, in order for Chrome DevTools to measure the performance of a web page, it needs access to the front-end code of the web page. Perfetto, on the other hand, measures the performance of the Chrome browser itself, so it does not need to access the front-end code of the web page.

Let's try Perfetto

This section explains how to use Perfetto to measure the rendering performance of a web page. First, let's start by installing Perfetto.

Installing Perfetto
Perfetto is built into the Chrome browser by default, but to use Perfetto's GUI, you need to install the Perfetto package.

Use the following command to install the Perfetto package

npm install -g perfetto

Next, execute the following command to start Perfetto's GUI

perfetto --http

This command will launch Perfetto's GUI. Accessing http://localhost:9001 with a browser will bring up Perfetto's GUI.

Measuring Rendering Performance in Perfetto
This section explains how to measure the rendering performance of a web page using Perfetto's GUI.

Start the Chrome browser and launch the Developer Tools.
Click on the "Performance" tab to start recording.
Load the web page.
Stop recording and load the recording file in Perfetto's GUI.
Check the details of the rendering performance.

Follow the above steps in detail.

Open the Chrome browser and launch the Developer Tools.
Open the Chrome browser and launch the Developer Tools. You can launch the Developer Tools by pressing the F12 key or by clicking "Tools"->"Developer Tools" in the Chrome menu.
Click on the "Performance" tab to start recording.
Click on the "Performance" tab in the Developer Tools to start recording. Once recording is started, the Chrome browser will begin measuring the performance of the web page. Do not perform any operations on the web page while recording.
Load the web page.After you start recording, load the web page. Wait until the web page has finished loading. When loading is complete, recording will automatically stop.
Stop recording and load the recording file in Perfetto's GUI.
When the web page has finished loading, stop recording. To stop recording, click the "Stop" button in the upper right corner of the "Performance" tab in the Developer Tools. To load a recording file, open Perfetto's GUI. When you access http://localhost:9001 in your browser, you will see Perfetto's GUI; click on the "Open" button on the left side of Perfetto's GUI and select the recording file. Once the file is loaded, Perfetto's GUI will display the rendering performance details.
Review the rendering performance details.Perfetto's GUI will display rendering performance details. The details include the time taken to load the web page, the time taken to render the web page, and the network latency. Review these details and create an action plan to improve the performance of your web pages.

Using Perfetto from code

You can also use Perfetto from code. Below is an example code that uses Node.js to start Perfetto, initiate recording, and save the recording file.

javascript

const perfetto = require('perfetto-protocol');
const perf = require('bindings')('perfetto_bindings');

const traceConfig = perf.convertConfig(config);

perf.startTrace(traceConfig).then(async (writer) => { console.log('Recording...'); await new Promise*2; console.log('Stopped recording'); const trace = await writer.stop(); const data = Buffer.concat(trace).toString('base64'); console.log(`Trace data: ${data}`); });

This code uses the perfetto-protocol and bindings packages. config object defines the parameters of the recording. events array specifies the trace events to be retrieved. In this example, we get the sched/sched_switch event and the gfx/compositor/frame event.

The writer object can be used to stream recordings. The writer object can be used to stream recordings.

To end the recording, call writer.stop(). This will return the trace data as an array of Buffers; use the Buffer.concat function to combine the trace data into a single Buffer, and use the toString('base64') method to Base64 encode the trace data.

The above is a description of how to use Perfetto. To solve web page performance problems, Perfetto can be used to see details of rendering performance. You can also use Perfetto from code using Node.js.