~web開発者は、 ~appの処理能~特性について，［ ~accessする能, 理解する能 ］を必要とする。 ~JS `ECMA-262$r は、 ~appの待時間を測定する仕組み （ `Date.now()^m ~methodで現在の時刻印を検索取得する） を供するが、 この時刻印の精度は~UAによってまちまちである。 ◎ Web developers need the ability to assess and understand the performance characteristics of their applications. While JavaScript [ECMA-262] provides a mechanism to measure application latency (retrieving the current timestamp from the Date.now() method), the precision of this timestamp varies between user agents.
この文書は、 高-精度かつ単調増加する時刻印を公開する［ `PerformanceMark$I, `PerformanceMeasure$I ］~interfaceを定義し， `Performance$I ~interfaceを拡張して、 開発者が~appの処理能をより良く測定できるようにする。 ◎ This document defines the PerformanceMark and PerformanceMeasure interfaces, and extensions to the Performance interface, which expose a high precision, monotonically increasing timestamp so that developers can better measure the performance characteristics of their applications.
次の~scriptに，開発者が~scriptに関係する計時~dataを得するために、 この文書で定義される~interfaceを利用する例を示す： ◎ The following script shows how a developer can use the interfaces defined in this document to obtain timing data related to developer scripts. ◎ Example 1
async function run() {
performance.mark("startTask1");
await doTask1(); /* */
performance.mark("endTask1");
performance.mark("startTask2");
await doTask2(); /* */
performance.mark("endTask2");
/* */
const %entries = performance.getEntriesByType("mark");
for (const %entry of %entries) {
console.table(%entry.toJSON());
}
}
run();
`PERFORMANCE-TIMELINE-2$r は、 記録された計量を検索取得するときに利用できる 2 つの仕組みを定義する：
◎ Note ◎ [PERFORMANCE-TIMELINE-2] defines two mechanisms that can be used to retrieve recorded metrics: getEntries() and getEntriesByType() methods, and the PerformanceObserver interface. The former is best suited for cases where you want to retrieve a particular metric by name at a single point in time, and the latter is optimized for cases where you may want to receive notifications of new metrics as they become available.
別の例として、 ある %component を~~包装する要素は［ ~clickされたとき、 何らかの新たな内容を~fetchして，~fetchされたことを指示する ］とする。 ここでは、 利用者が~clickしてから~fetchが完了するまでにかかった時間を報告したい。 ［ ~click~handlerが実行される時刻 ］を~markするのでは，その~eventが処理される【~handlerに渡される】までの待時間を取りこぼすことになるので、 代わりに~eventの~hardware時刻印【 `timeStamp$m 】を利用する。 また，より詳細な解析を得るため、 %component の名前も知りたい。 ◎ As another example, suppose that there is an element which, when clicked, fetches some new content and indicates that it has been fetched. We'd like to report the time from when the user clicked to when the fetch was complete. We can't mark the time the click handler executes since that will miss latency to process the event, so instead we use the event hardware timestamp. We also want to know the name of the component to have more detailed analytics. ◎ Example 2
%element.addEventListener("click", %e => {
const %component = getComponent(%element);
fetch(%component.url).then(() => {
%element.textContent = "Updated";
const %updateMark = performance.mark("update_component", {
detail: {component: %component.name},
});
performance.measure("click_to_update_component", {
detail: {component: %component.name},
start: %e.timeStamp,
end: %updateMark.startTime,
});
});
});
2. 適合性
【 この節の内容は ~W3C日本語訳 共通~page に移譲。 】
【この訳に特有な表記規約】 ◎表記記号 3. 利用元~計時 3.1. `Performance^I ~interfaceに対する拡張［ `Performance$I ~interface, `DOMHighResTimeStamp$I 型 ］は `HR-TIME-2$r にて定義される。 `PerformanceEntry$I ~interfaceは `PERFORMANCE-TIMELINE-2$r にて定義される。 ◎ The Performance interface and DOMHighResTimeStamp are defined in [HR-TIME-2]. The PerformanceEntry interface is defined in [PERFORMANCE-TIMELINE-2].
dictionary `PerformanceMarkOptions$I {
`any$ `detail$mkO;
`DOMHighResTimeStamp$ `startTime$mkO;
};
dictionary `PerformanceMeasureOptions$I {
`any$ `detail$msO;
(`DOMString$ or `DOMHighResTimeStamp$) `start$msO;
`DOMHighResTimeStamp$ `duration$msO;
(`DOMString$ or `DOMHighResTimeStamp$) `end$msO;
};
partial interface `Performance$I {
`PerformanceMark$I `mark$m(
`DOMString$ %markName,
optional `PerformanceMarkOptions$I %markOptions = {}
);
`undefined$ `clearMarks$m(optional `DOMString$ %markName);
`PerformanceMeasure$I `measure$m(
`DOMString$ %measureName,
optional (`DOMString$ or `PerformanceMeasureOptions$I) %startOrMeasureOptions = {},
optional `DOMString$ %endMark
);
`undefined$ `clearMeasures$m(optional `DOMString$ %measureName);
};
`mark(markName, markOptions)@m ~methodは、 時刻印に所与の名前（ “~mark” ）を結付けて格納する。 ◎ 3.1.1 mark() method ◎ Stores a timestamp with the associated name (a "mark").
その~method手続きは： ◎ It MUST run these steps:
%markOptions に与える `PerformanceMarkOptions@I 辞書の： ◎ 3.1.1.1 PerformanceMarkOptions dictionary
`clearMarks(markName)@m ~methodは、 格納-済み時刻印のうち，所与の名前が結付けられたものを除去する。 ◎ 3.1.2 clearMarks() method ◎ Removes the stored timestamp with the associated name.＼
その~method手続きは ⇒ `処理能~entry~buffer$から，次を満たす `PerformanceMark$I ~objすべてを除去する ⇒ %markName は与えられていないならば無条件 ／ ~ELSE_ `name$m ~EQ %markName なるもの ◎ It MUST run these steps: • If markName is omitted, remove all PerformanceMark objects from the performance entry buffer. • Otherwise, remove all PerformanceMark objects listed in the performance entry buffer whose name is markName. • Return undefined.
`measure(measureName, startOrMeasureOptions, endMark)@m ~methodは、 2 つの~markの間の所要時間（ “測定n” ）を表す `DOMHighResTimeStamp$I 値に所与の名前を結付けて格納する。 ◎ 3.1.3 measure() method ◎ Stores the DOMHighResTimeStamp duration between two marks along with the associated name (a "measure").
その~method手続きは： ◎ It MUST run these steps:
~IF［ %startOrMeasureOptions は `PerformanceMeasureOptions$I ~objである ］：
~IF［ ~AND↓ ］…
~OR↓：
…ならば ⇒ ~THROW `TypeError$E
%終端~時刻 ~LET 次の手続きを走らせた結果： ◎ Compute end time as follows:
~IF［ %始端 ~NEQ ε ］~AND［ %所要時間 ~NEQ ε ］： ◎ Otherwise, if startOrMeasureOptions is a PerformanceMeasureOptions object, and if its start and duration members both exist:
%始端~時刻 ~LET 次の手続きを走らせた結果： ◎ Compute start time as follows:
~IF［ %所要時間 ~NEQ ε ］~AND［ %終端 ~NEQ ε ］： ◎ Otherwise, if startOrMeasureOptions is a PerformanceMeasureOptions object, and if its duration and end members both exist:
%startOrMeasureOptions に与える `PerformanceMeasureOptions@I 辞書の： ◎ 3.1.3.1 PerformanceMeasureOptions dictionary
`clearMeasures(measureName)@m ~methodは、 所与の名前が結付けられた，格納-済み時刻印を除去する。 ◎ 3.1.4 clearMeasures() method ◎ Removes stored timestamp with the associated name.＼
その~method手続きは ⇒ `処理能~entry~buffer$から，次を満たす `PerformanceMeasure$I ~objすべてを除去する ⇒ %measureName は与えられていないならば無条件 ／ ~ELSE_ `name$m ~EQ %measureName なるもの ◎ It MUST run these steps: • If measureName is omitted, remove all PerformanceMeasure objects in the performance entry buffer. • Otherwise remove all PerformanceMeasure objects listed in the performance entry buffer whose name is measureName. • Return undefined.
3.2. `PerformanceMark^I ~interface`PerformanceMark$I ~interfaceは、 `Performance$I ~interfaceの `mark()$m ~methodを介して作成された~markも`処理能~時列線$に公開する。 ◎ The PerformanceMark interface also exposes marks created via the Performance interface's mark() method to the Performance Timeline.
[`Exposed$=(Window,Worker)]
interface `PerformanceMark@I : `PerformanceEntry$I {
`PerformanceMark$mc(`DOMString$ %markName, optional `PerformanceMarkOptions$I %markOptions = {});
readonly attribute `any$ `detail$mK;
};
`PerformanceMark$I ~interfaceは、 `PerformanceEntry$I ~interfaceの次に挙げる属性を拡張する： ◎ The PerformanceMark interface extends the following attributes of the PerformanceEntry interface:
【 すなわち，当の~objを作成した `PerformanceMark()$m 構築子の手続き（ `mark()$m ~methodが呼出したそれも含む）にて設定された値を返す。 】
`PerformanceMark$I ~interfaceは、 次に挙げる［ 属性／構築子 ］も追加的に包含する： ◎ The PerformanceMark interface contains the following additional attribute:
`detail@mK 取得子~手続きは、 コレの構築-時に `PerformanceMarkOptions$I 辞書から複製された値を返す。 ◎ The detail attribute must return the value it is set to (it's copied from the PerformanceMarkOptions dictionary).
`PerformanceMark(markName, markOptions)@m 構築子~手続きは： ◎ 3.2.1 The PerformanceMark Constructor ◎ The PerformanceMark constructor must run the following steps:
コレの `startTime$m ~SET 次の手続きを走らせた結果
`PerformanceMeasure$I ~interfaceは、 `Performance$I ~interfaceの `measure()$m ~methodを介して作成された測定nも`処理能~時列線$に公開する。 ◎ The PerformanceMeasure interface also exposes measures created via the Performance interface's measure() method to the Performance Timeline.
[`Exposed$=(Window,Worker)]
interface `PerformanceMeasure@I : `PerformanceEntry$I {
readonly attribute `any$ `detail$mS;
};
`PerformanceMeasure$I ~interfaceは、 `PerformanceEntry$I ~interfaceの次に挙げる属性を拡張する： ◎ The PerformanceMeasure interface extends the following attributes of the PerformanceEntry interface:
【 すなわち，当の~objを作成した `measure()$m ~methodにて設定された値を返す。 】
`PerformanceMeasure$I ~interfaceは、 次の属性も追加的に包含する： ◎ The PerformanceMeasure interface contains the following additional attribute:
`detail@mS 取得子~手続きは、 コレの作成-時に `PerformanceMeasureOptions$I 辞書から複製された値を返す。 ◎ The detail attribute must return the value it is set to (it's copied from the PerformanceMeasureOptions dictionary).
4. 処理注記： `User Timing^cite ~APIを実装する~UAは、 その~supportを開発者が検出できるよう， `supportedEntryTypes$m 内に `mark^l, `measure^l を含める必要がある。 ◎ Note A user agent implementing the User Timing API would need to include "mark" and "measure" in supportedEntryTypes. This allows developers to detect support for User Timing.
`~markを時刻印に変換する@ ~algoは、 所与の ( 文字列または `DOMHighResTimeStamp$I %~mark ) に対し， %~mark の型に応じて： ◎ 4.1 Convert a mark to a timestamp ◎ To convert a mark to a timestamp, given a mark that is a DOMString or DOMHighResTimeStamp run these steps:＼
`名前を時刻印に変換する@ ~algoは、 所与の ( %名前 ) に対し： ◎ 4.2 Convert a name to a timestamp ◎ To convert a name to a timestamp given a name＼
注記： `NAVIGATION-TIMING$r にて定義される `PerformanceTiming$I ~interfaceは、 今や廃用にされたものと見なされている。 `PerformanceTiming$I ~interfaceからの名前の利用は，後方-互換であり続けるよう~supportされるが、 将来に，この機能性を `NAVIGATION-TIMING-2$r に定義される `PerformanceNavigationTiming$I （あるいは他の~interface）内の名前にまで拡張する計画は無い。 ◎ Note The PerformanceTiming interface was defined in [NAVIGATION-TIMING] and is now considered obsolete. The use of names from the PerformanceTiming interface is supported to remain backwards compatible, but there are no plans to extend this functionality to names in the PerformanceNavigationTiming interface defined in [NAVIGATION-TIMING-2] (or other interfaces) in the future.
5. 推奨される~mark名開発者には、 共通的な計時を［ 次に挙げる推奨される~mark名を利用して~markする ］ことが奨励される。 `~UA$は、 これらの名前の用法が［ 適切かどうか／当の名前の記述と一貫であるかどうか ］を検証しない。 ◎ Developers are encouraged to use the following recommended mark names to mark common timings. The user agent does not validate that the usage of these names is appropriate or consistent with its description.
注記： そのような推奨される~mark名を追加することは、［ 処理能~toolが~site向け指導を誂える ］ための助けになり得る。 これらの~mark名は、［ 本物の利用者を監視している~provider／~UA ］が［ ~web開発者たちによる，自身の~appの処理能に関する通達 ］を大規模に収集して，その情報を［ ~siteに特有な作業を要求することなく開発者に表面化する ］ための助けにもなり得る。 ◎ Adding such recommended mark names can help performance tools tailor guidance to a site. These mark names can also help real user monitoring providers and user agents collect web developer signals regarding their application's performance at scale, and surface this information to developers without requiring any site-specific work.
次の例では、 ~pageは，読込ngに際して ある［ `chat widget^en, `searchbox^en, `newsfeed^en ］を非同期的に初期化する。 ~mark名 `mark_fully_loaded$l は、 それが完遂したとき［ 研究用~toolや解析~provider ］が当の計時を自動的に示すことを可能化する。 ◎ In this example, the page asynchonously initializes a chat widget, a searchbox, and a newsfeed upon loading. When finished, the "mark_fully_loaded" mark name enables lab tools and analytics providers to automatically show the timing.
window.addEventListener("load", (%event) => {
Promise.all([
loadChatWidget(),
initializeSearchAutocomplete(),
initializeNewsfeed()]).then(() => {
performance.mark('mark_fully_loaded');
});
});
処理能に影響iし得る特能の用法を~markする — ~tool法や解析がそれを織り込めるよう。 `detail$mK ~metadataは、 当の特能について有用な情報として，次に挙げる~memberを包含し得る： ◎ Mark the usage of a feature which may impact performance so that tooling and analytics can take it into account. The detail metadata can contain any useful information about the feature, including:
次の~code例は、 画像を~sizeして最適な処理能を得るために， ~framework `FancyJavaScriptFramework^c 用の特能 `ImageOptimizationComponent^c が利用されたことを注記する — それが処理能を改善する助けになったかどうか，研究用~toolや解析が測定できるよう。 ◎ In this example, the ImageOptimizationComponent for FancyJavaScriptFramework is used to size images for optimal performance. The code notes this feature's usage so that lab tools and analytics can measure whether it helped improve performance.
performance.mark('mark_feature_usage', {
'detail': {
'feature': 'ImageOptimizationComponent',
'framework': 'FancyJavaScriptFramework'
}
})
この仕様に定義される~interfaceは、 ~page上の特定の~JS活動を感知し得る計時~情報を公開する。 高分解能な計時~情報を公開する際の~privacyと~securityの考慮点については `HR-TIME-2$r を~~参照されたし。 ◎ The interfaces defined in this specification expose potentially sensitive timing information on specific JavaScript activity of a page. Please refer to [HR-TIME-2] for privacy and security considerations of exposing high-resolution timing information.
~web~platformは，［ 同じ~pageに含められた どの~scriptも、 各~scriptの生成元に関わらず，同じ~accessを有する ］という不変則の下に設計されているので、 この仕様に定義される~interfaceは，［ 計時~情報を記録する ／ 記録された計時~情報を検索取得する ］ときに制約を課すものではない。 すなわち，~pageに含められた~scriptにより記録された利用元~計時~markや測定nは、 同じ~pageで走っている他のどの~scriptからも，その生成元に関わらず読取れる。 ◎ Because the web platform has been designed with the invariant that any script included on a page has the same access as any other script included on the same page, regardless of the origin of either scripts, the interfaces defined by this specification do not place any restrictions on recording or retrieval of recorded timing information - i.e. a user timing mark or measure recorded by any script included on the page can be read by any other script running on the same page, regardless of origin.
謝辞この仕事に貢献された次の方々に感謝する：
Thanks to James Simonsen, Jason Weber, Nic Jansma, Philippe Le Hegaret, Karen Anderson, Steve Souders, Sigbjorn Vik, Todd Reifsteck, and Tony Gentilcore for their contributions to this work.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3