From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/frame_timing_api/index.html | 56 +++++++++ .../using_the_frame_timing_api/index.html | 137 +++++++++++++++++++++ 2 files changed, 193 insertions(+) create mode 100644 files/ja/web/api/frame_timing_api/index.html create mode 100644 files/ja/web/api/frame_timing_api/using_the_frame_timing_api/index.html (limited to 'files/ja/web/api/frame_timing_api') diff --git a/files/ja/web/api/frame_timing_api/index.html b/files/ja/web/api/frame_timing_api/index.html new file mode 100644 index 0000000000..7f2a31ec71 --- /dev/null +++ b/files/ja/web/api/frame_timing_api/index.html @@ -0,0 +1,56 @@ +--- +title: Frame Timing API +slug: Web/API/Frame_Timing_API +tags: + - Guide + - NeedsTranslation + - Overview + - TopicStub + - Web Performance +translation_of: Web/API/Frame_Timing_API +--- +
{{DefaultAPISidebar("Frame Timing API")}}{{SeeCompatTable}}
+ +

The PerformanceFrameTiming interface provides frame timing data about the browser's event loop. A frame represents the amount of work a browser does in one event loop iteration such as processing DOM events, resizing, scrolling, rendering, CSS animations, etc. A frame rate of 60 fps (frames per second) for a 60 Hz refresh rate is a common target for a good responsive user experience. This means the browser should process a frame in about 16.7 ms.

+ +

An application can register a {{domxref("PerformanceObserver")}} for "frame" {{domxref("PerformanceEntry","performance entry types")}}. The observer (callback) will be notified when new "frame" events are added to the browser's performance timeline and the frame's {{domxref("PerformanceEntry.duration","duration")}} (length of time) will be available. This data can be used to help identify areas that take too long to provide a good user experience.

+ +

Example code of the interfaces described in this document is included in Using the Frame Timing API.

+ +

Performance frames

+ +

The {{domxref("PerformanceFrameTiming")}} interface extends the following {{domxref("PerformanceEntry")}} properties (for "frame" {{domxref("PerformanceEntry.entryType","performance entry types")}}) by qualifying and constrainting the properties as follows:

+ +
+
{{domxref("PerformanceEntry.entryType")}}
+
Set to "frame".
+
{{domxref("PerformanceEntry.name")}}
+
Set to the document's address.
+
{{domxref("PerformanceEntry.startTime")}}
+
Set to the {{domxref("DOMHighResTimeStamp")}} when the frame was started.
+
{{domxref("PerformanceEntry.duration")}}
+
Set to a {{domxref("DOMHighResTimeStamp","timestamp")}} indicating the difference between the startTimes of two successive frames.
+
+ +

This data, particularly the duration timestamp, can be used to help identify performance problems.

+ +

Frame observers

+ +

{{experimental_inline}}The performance observer interfaces allow an application to register an observer for specific {{domxref("PerformanceEntry","performance event types")}}. When one of those event types is recorded in the browser's performance timeline, the application is notified of the event via the observer's callback function that was specified when the observer was created.

+ +

To observe "frame" performance entry types, the application first creates a {{domxref("PerformanceObserver")}} object with a specific frame observer callback (function). Next, {{domxref("PerformanceObserver.observe()")}} is used to specify the set of performance events to observe - in this case, just the "frame" event type. When the browser adds a new frame to the performance timeline, the specified observer callback will be invoked.

+ +

Accessing frame data

+ +

When a frame {{domxref("PerformanceObserver","observer")}} is invoked, frame {{domxref("PerformanceEntry","performance entries")}} can be retrieved by calling {{domxref("PerformanceObserverEntryList.getEntriesByType()")}} with an argument of "frame". This method returns a list of "frame" {{domxref("PerformanceEntry")}} objects. Each frame object's {{domxref("PerformanceEntry.duration","duration")}} property returns the timestamp of two consecutive frames. If this value is greater than the time needed to provide a good user experience, further analysis might be warranted.

+ +

Browser compatibility

+ +

{{experimental_inline}}As shown in the {{domxref("PerformanceFrameTiming")}} interface's Browser Compatibility table, this interface has no implementations.

+ +

See also

+ + diff --git a/files/ja/web/api/frame_timing_api/using_the_frame_timing_api/index.html b/files/ja/web/api/frame_timing_api/using_the_frame_timing_api/index.html new file mode 100644 index 0000000000..fa1be473f4 --- /dev/null +++ b/files/ja/web/api/frame_timing_api/using_the_frame_timing_api/index.html @@ -0,0 +1,137 @@ +--- +title: フレームタイミング API の使用 +slug: Web/API/Frame_Timing_API/Using_the_Frame_Timing_API +tags: + - Web パフォーマンス + - ガイド +translation_of: Web/API/Frame_Timing_API/Using_the_Frame_Timing_API +--- +
{{DefaultAPISidebar("Frame Timing API")}}{{SeeCompatTable}}
+ +

The PerformanceFrameTiming interface provides frame timing data about the browser's event loop. A frame represents the amount of work a browser does in one event loop iteration such as processing DOM events, resizing, scrolling, rendering, CSS animations, etc. A frame rate of 60 fps (frames per second) for a 60 Hz refresh rate is a common target for a good responsive user experience. This means the browser should process a frame in about 16.7ms.

+ +

An application can register a {{domxref("PerformanceObserver")}} for "frame" {{domxref("PerformanceEntry","performance entry types")}} and the observer will have data about the duration of each frame event. This data can be used to help identify areas that take too long to provide a good user experience.

+ +

This document describes how to use the {{domxref("PerformanceFrameTiming")}} interfaces including example code. For an overview of these interfaces see Frame Timing API.

+ +

フレームオブザーバー

+ +

{{experimental_inline}}The performance observer interfaces allow an application to register an observer for specific {{domxref("PerformanceEntry","performance event types")}}. When one of those event types is added to the browser's performance timeline, the application is notified of the event via the observer's callback function that was specified when the observer was created.

+ +

オブザーバーを作成する

+ +

To observe "frame" performance entry types, the application first creates a {{domxref("PerformanceObserver")}} object with a specific frame observer callback. In the following example, two observers for the "frame" {{domxref("PerformanceEntry.entryType","performance entry type")}} are created and the first observer constructor uses inline function syntax.

+ +
function create_frame_observer() {
+  if (window.PerformanceObserver === undefined) return;
+
+  // Register the performance observer
+  var observe_frame = new PerformanceObserver(function(list) {
+    // Log the frame entries
+    var perfEntries = list.getEntriesByType("frame");
+    for (var i=0; i < perfEntries.length; i++) {
+      console.log("OBS #1: [" + i + "] = " + perfEntries[i].name);
+    }
+  });
+  // Only observe 'frame' events
+  observe_frame.observe({entryTypes: ['frame']});
+}
+
+function init () {
+  create_frame_observer();
+
+  var obs = new PerformanceObserver(frame_observer_2);
+  obs.observe({entryTypes: ['frame']});
+}
+
+function frame_observer_2(list) {
+  // Log the frame entries
+  var perfEntries = list.getEntriesByType("frame");
+  for (var i=0; i < perfEntries.length; i++) {
+    console.log("OBS #2: [" + i + "] = " + perfEntries[i].name);
+  }
+}
+
+<body onload="init(event)">
+
+ +

When the browser adds a new "frame" entry to the performance timeline, both of the observer callbacks will be invoked.

+ +

通知を登録する

+ +

After an observer is created, the next step is to use the {{domxref("PerformanceObserver.observe()")}} method to specify the set of performance events to observe. In the following example, the observer only registers for "frame" {{domxref("PerformanceEntry.entryType","performance entry")}} notifications.

+ +
 var observe_frame = new PerformanceObserver(function(list) {
+   // Process the frame ...
+ });
+ // Only observe 'frame' events
+ observe_frame.observe({entryTypes: ['frame']});
+
+ +

In the following example, the observer registers to be notified when several different {{domxref("PerformanceEntry.entryType","performance entry types")}} are added to the performance timeline.

+ +
 var observe_all = new PerformanceObserver(function(list) {
+   var perfEntries = list.getEntries();
+   for (var i=0; i < perfEntries.length; i++) {
+     switch (perfEntries[i].entryType) {
+       case "frame": process_frame(perfEntries[i]); break;
+       case "mark": process_mark(perfEntries[i]); break;
+       case "measure": process_measure(perfEntries[i]); break;
+       case "resource": process_resource(perfEntries[i]); break;
+       default: console.log("Unexpected performance entry type: " + perfEntries[i].entryType);
+     }
+  }
+ });
+ // Observe frame, mark, measure and resource events
+ observe_frame.observe({entryTypes: ['frame', 'mark', 'measure', 'resource']});
+
+ +

フレームデータへのアクセス

+ +

When a frame {{domxref("PerformanceObserver","observer")}} is invoked, the observer callback is given one argument that is a {{domxref("PerformanceObserverEntryList")}} object. This object has three methods to retrieve frame data:

+ +
+
{{domxref("PerformanceObserverEntryList.getEntries","PerformanceObserverEntryList.getEntries()")}}
+
Returns a list of explicitly observed {{domxref("PerformanceEntry")}} objects based on the list of entry types given to {{domxref("PerformanceObserver.observe()")}}.
+
{{domxref("PerformanceObserverEntryList.getEntriesByType","PerformanceObserverEntryList.getEntriesByType()")}}
+
Returns a list of explicitly observed {{domxref("PerformanceEntry")}} objects of the given entry type.
+
{{domxref("PerformanceObserverEntryList.getEntriesByName","PerformanceObserverEntryList.getEntriesByName()")}}
+
Returns a list of explicitly observed {{domxref("PerformanceEntry")}} objects based on the given name and entry type.
+
+ +

In the following example, the observer only processes "frame" entries.

+ +
var THRESHOLD = 1500;
+var observe_frame = new PerformanceObserver(function(list) {
+  var perfEntries = list.getEntriesByType("frame");
+  for (var i=0; i < perfEntries.length; i++) {
+    if (perfEntries[i].duration > THRESHOLD) {
+      console.log("Warning: frame '" + THRESHOLD + "' exceeded!");
+    }
+  }
+});
+observe_frame.observe({entryTypes: ['frame']});
+
+ +

ツールが助けになります！

+ +

First, perhaps using the tools will save you is a bit too strong but performance tools can certainly help identify code that is not conformant to some expected time threshold. This section briefly describes the web performance tools for the Firefox and Chrome/Canary browsers.

+ +

Firefox performance tool

+ +

Firefox's performance tool allows the developer to record a piece of the user's interaction and the data obtained during the recording is used to create a profile of the browser's activity. The profile includes a waterfall of the activity such as event handling, layout, painting, scripting, etc.

+ +

Firefox's performance tool also includes a frame rate graph which provides timestamps for each frame including the average frame rate and the minimum and maximum rates (for a specific recording session). This data, along with the waterfall data, gives an indication of where a site might be having frame related performance problems (for example, by correlating the recording's minimum rates with their respective waterfall events).

+ +

The performance tool's flame chart and call tree tabs provide data to help analyze the site's JavaScript usage. The call tree shows where the application is spending most of its time, whereas the flame chart shows the state of the JavaScript stack for the code at every millisecond during the performance profile. This provides a way to know exactly which function was executing at any point during the recording, how long it ran, and where it was called from.

+ +

Chrome performance tool

+ +

The Chrome (and Canary) browsers also have a performance tool with similar functions as Firefox. See Performance profiling with the Timeline for more information about this tool.

+ +

あわせて参照

+ + -- cgit v1.2.3-54-g00ecf