From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/performanceentry/duration/index.html | 111 +++++++++++++ .../web/api/performanceentry/entrytype/index.html | 128 +++++++++++++++ files/zh-cn/web/api/performanceentry/index.html | 101 ++++++++++++ .../zh-cn/web/api/performanceentry/name/index.html | 178 +++++++++++++++++++++ .../web/api/performanceentry/tojson/index.html | 105 ++++++++++++ 5 files changed, 623 insertions(+) create mode 100644 files/zh-cn/web/api/performanceentry/duration/index.html create mode 100644 files/zh-cn/web/api/performanceentry/entrytype/index.html create mode 100644 files/zh-cn/web/api/performanceentry/index.html create mode 100644 files/zh-cn/web/api/performanceentry/name/index.html create mode 100644 files/zh-cn/web/api/performanceentry/tojson/index.html (limited to 'files/zh-cn/web/api/performanceentry') diff --git a/files/zh-cn/web/api/performanceentry/duration/index.html b/files/zh-cn/web/api/performanceentry/duration/index.html new file mode 100644 index 0000000000..827c60d7e5 --- /dev/null +++ b/files/zh-cn/web/api/performanceentry/duration/index.html @@ -0,0 +1,111 @@ +--- +title: PerformanceEntry.duration +slug: Web/API/PerformanceEntry/duration +translation_of: Web/API/PerformanceEntry/duration +--- +
{{APIRef("Performance Timeline API")}}
+ +

The duration property returns a {{domxref("DOMHighResTimeStamp","timestamp")}} that is the duration of the {{domxref("PerformanceEntry","performance entry")}}.

+ +

The value returned by this property depends on the performance entry's {{domxref("PerformanceEntry.entryType","type")}}:

+ + + +

This property is {{readonlyInline}}.

+ +

Syntax

+ +
entry.duration;
+ +

Return value

+ +

A {{domxref("DOMHighResTimeStamp")}} representing the duration of the {{domxref("PerformanceEntry","performance entry")}}. If the duration concept doesn't apply for a particular performance metric, the browser may choose to return a duration of 0.

+ +

Note: if the performance entry has an {{domxref("PerformanceEntry.entryType","entryType")}} of "resource" (i.e. the entry is a {{domxref("PerformanceResourceTiming")}} object), this property returns the difference between the {{domxref("PerformanceEntry.responseEnd")}} and {{domxref("PerformanceEntry.startTime")}} {{domxref("DOMHighResTimeStamp","timestamps")}}.

+ +

Example

+ +

The following example shows the use of the duration property.

+ +
function run_PerformanceEntry() {
+  log("PerformanceEntry support ...");
+
+  if (performance.mark === undefined) {
+    log("... performance.mark Not supported");
+    return;
+  }
+
+  // Create some performance entries via the mark() method
+  performance.mark("Begin");
+  do_work(50000);
+  performance.mark("End");
+
+  // Use getEntries() to iterate through the each entry
+  var p = performance.getEntries();
+  for (var i=0; i < p.length; i++) {
+    log("Entry[" + i + "]");
+    check_PerformanceEntry(p[i]);
+  }
+}
+function check_PerformanceEntry(obj) {
+  var properties = ["name", "entryType", "startTime", "duration"];
+  var methods = ["toJSON"];
+
+  for (var i=0; i < properties.length; i++) {
+    // check each property
+    var supported = properties[i] in obj;
+    if (supported)
+      log("..." + properties[i] + " = " + obj[properties[i]]);
+    else
+      log("..." + properties[i] + " = Not supported");
+  }
+  for (var i=0; i < methods.length; i++) {
+    // check each method
+    var supported = typeof obj[methods[i]] == "function";
+    if (supported) {
+      var js = obj[methods[i]]();
+      log("..." + methods[i] + "() = " + JSON.stringify(js));
+    } else {
+      log("..." + methods[i] + " = Not supported");
+    }
+  }
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Performance Timeline Level 2', '#dom-performanceentry-duration', 'duration')}}{{Spec2('Performance Timeline Level 2')}} 
{{SpecName('Performance Timeline', '#dom-performanceentry-duration', 'duration')}}{{Spec2('Performance Timeline')}}Initial definition.
+ +

Browser compatibility

+ +
+
+ + +

{{Compat("api.PerformanceEntry.duration")}}

+
+
diff --git a/files/zh-cn/web/api/performanceentry/entrytype/index.html b/files/zh-cn/web/api/performanceentry/entrytype/index.html new file mode 100644 index 0000000000..32cdcd696d --- /dev/null +++ b/files/zh-cn/web/api/performanceentry/entrytype/index.html @@ -0,0 +1,128 @@ +--- +title: PerformanceEntry.entryType +slug: Web/API/PerformanceEntry/entryType +translation_of: Web/API/PerformanceEntry/entryType +--- +
 
+  {{APIRef("Performance Timeline API")}}
+ +

The entryType  返回一个代表performance metric 类型的{{domxref("DOMString")}} , 例如被performance.mark("begin") 所创建的entry 的entryType 就是 "mark". 此属性只读.

+ +

语法

+ +
var type = entry.entryType;
+ +

返回值

+ +

返回值取决于  PerformanceEntry 对象的subtype， entryType的取值会影响{{domxref('PerformanceEntry.name')}} 属性， 具体如下表所示. 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueSubtypeType of name propertyDescription of name property
frame, navigation{{domxref('PerformanceFrameTiming')}}, {{domxref('PerformanceNavigationTiming')}}{{domxref("URL")}}The document's address.
resource{{domxref('PerformanceResourceTiming')}}{{domxref("URL")}}The resolved URL of the requested resource. This value doesn't change even if the request is redirected.
mark{{domxref('PerformanceMark')}}{{domxref("DOMString")}}The name used when the mark was created by calling {{domxref("Performance.mark","performance.mark()")}}.
measure{{domxref('PerformanceMeasure')}}{{domxref("DOMString")}}name used when the measure was created by calling {{domxref("Performance.measure","performance.measure()")}}.
paint{{domxref('PerformancePaintTiming')}}{{domxref("DOMString")}}Either 'first-paint' or 'first-contentful-paint'.
+ +

 

+ +

范例

+ +

下面的代码说明了  entryType 属性的用法.

+ +
function run_PerformanceEntry() {
+
+  // check for feature support before continuing
+  if (performance.mark === undefined) {
+    console.log("performance.mark not supported");
+    return;
+  }
+
+  // Create a performance entry named "begin" via the mark() method
+  performance.mark("begin");
+
+  // Check the entryType of all the "begin" entries
+  var entriesNamedBegin = performance.getEntriesByName("begin");
+  //entriesNamedBegin
+  //    Array [ PerformanceMark ]
+  //entriesNamedBegin[0]
+  //    PerformanceMark { name: "begin", entryType: "mark", startTime: 94661370.14, duration: 0 }
+  //entriesNamedBegin[0].entryType
+  //    "mark"
+  //entriesNamedBegin[0].name
+  //    "begin"
+
+  for (var i=0; i < entriesNamedBegin.length; i++) {
+      var typeOfEntry = entriesNamedBegin[i].entryType;
+      console.log("Entry is type: " + typeOfEntry);
+  }
+
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Performance Timeline Level 2', '#dom-performanceentry-entrytype', 'entryType')}}{{Spec2('Performance Timeline Level 2')}} 
{{SpecName('Performance Timeline', '#dom-performanceentry-entrytype', 'entryType')}}{{Spec2('Performance Timeline')}}Initial definition.
+ +

Browser compatibility

+ +
+
+ + +

{{Compat("api.PerformanceEntry.entryType")}}

+
+
diff --git a/files/zh-cn/web/api/performanceentry/index.html b/files/zh-cn/web/api/performanceentry/index.html new file mode 100644 index 0000000000..c0fde6ee9d --- /dev/null +++ b/files/zh-cn/web/api/performanceentry/index.html @@ -0,0 +1,101 @@ +--- +title: PerformanceEntry +slug: Web/API/PerformanceEntry +tags: + - API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Performance +translation_of: Web/API/PerformanceEntry +--- +
{{APIRef("Performance Timeline API")}}
+ +

PerformanceEntry 对象代表了 performance 时间列表中的单个 metric 数据. 每一个 performance entry 都可以在应用运行过程中通过手动构建 {{domxref("PerformanceMark","mark")}} 或者 {{domxref("PerformanceMeasure","measure")}} (例如调用 {{domxref("Performance.mark","mark()")}} 方法) 生成. 此外, Performance entries 在资源加载的时候，也会被动生成（例如图片、script、css等资源加载）

+ +

Note: Performance 对象暴露给了 {{domxref("Window")}} 和 {{domxref("Worker")}}. 同时该对象扩展了几个其他对象的属性，包括 {{domxref("PerformanceMark")}}, {{domxref("PerformanceMeasure")}}, {{domxref("PerformanceFrameTiming")}}, {{domxref("PerformanceNavigationTiming")}} 以及 {{domxref("PerformanceResourceTiming")}}.

+ +

Properties

+ +
+
{{domxref("PerformanceEntry.name")}} {{readonlyInline}}
+
{{domxref("DOMString")}} 该 performance entry 的名字
+
{{domxref("PerformanceEntry.entryType")}} {{readonlyInline}}
+
{{domxref("DOMString")}} 代表所上报的 performance metric 的 entryType 类型，例如 "mark". 可以通过 {{domxref("PerformanceEntry.entryType","entryType")}} 查阅完整的 entryType type 类型.
+
{{domxref("PerformanceEntry.startTime")}} {{readonlyInline}}
+
 {{domxref("DOMHighResTimeStamp")}}  此为 metric 上报时的时间
+
{{domxref("PerformanceEntry.duration")}} {{readonlyInline}}
+
{{domxref("DOMHighResTimeStamp")}} 该事件的耗时
+
+ +

Methods

+ +
+
{{domxref("PerformanceEntry.toJSON","PerformanceEntry.toJSON()")}}
+
返回 PerformanceEntry 对象的 JSON 格式数据
+
 
+
+ +

Example

+ +

以下例子检查了当前浏览器所支持的所有 PerformanceEntry 属性，每个属性的检查结果都会通过 console 打印出来

+ +
function print_PerformanceEntries() {
+  // Use getEntries() to get a list of all performance entries
+  var p = performance.getEntries();
+  for (var i=0; i < p.length; i++) {
+    console.log("PerformanceEntry[" + i + "]");
+    print_PerformanceEntry(p[i]);
+  }
+}
+function print_PerformanceEntry(perfEntry) {
+  var properties = ["name",
+    "entryType",
+    "startTime",
+    "duration"];
+
+  for (var i=0; i < properties.length; i++) {
+    // check each property
+    var supported = properties[i] in perfEntry;
+    if (supported) {
+      var value = perfEntry[properties[i]];
+      console.log("... " + properties[i] + " = " + value);
+    } else {
+      console.log("... " + properties[i] + " = NOT supported");
+    }
+  }
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Performance Timeline Level 2', '#dom-performanceentry', 'PerformanceEntry')}}{{Spec2('Performance Timeline Level 2')}}Added toJSON() serializer method.
{{SpecName('Performance Timeline', '#dom-performanceentry', 'PerformanceEntry')}}{{Spec2('Performance Timeline')}}Initial definition.
+ +

Browser compatibility

+ +
+
+ + +

{{Compat("api.PerformanceEntry")}}

+
+
diff --git a/files/zh-cn/web/api/performanceentry/name/index.html b/files/zh-cn/web/api/performanceentry/name/index.html new file mode 100644 index 0000000000..a12b1c4c67 --- /dev/null +++ b/files/zh-cn/web/api/performanceentry/name/index.html @@ -0,0 +1,178 @@ +--- +title: PerformanceEntry.name +slug: Web/API/PerformanceEntry/name +translation_of: Web/API/PerformanceEntry/name +--- +
{{APIRef("Performance Timeline API")}}
+ +

name 是 {{domxref("PerformanceEntry")}} 接口的属性，此属性的返回值是 {{domxref("PerformanceEntry.entryType")}} 的返回值的一个补充，例如entry.entryType="navigation",entry.name="document". 这是一个只读属性.

+ +

Syntax

+ +
var name = entry.name;
+
+ +

返回值

+ +

返回值取决于PerformanceEntry 对象的 subtype和{{domxref("PerformanceEntry.entryType")}}的值, 如下表所示.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueSubtypeentryType valuesDescription
{{domxref("URL")}}{{domxref('PerformanceFrameTiming')}}, {{domxref('PerformanceNavigationTiming')}}frame, navigationThe document's address.
{{domxref("URL")}}{{domxref('PerformanceResourceTiming')}}resourceThe resolved URL of the requested resource. This value doesn't change even if the request is redirected.
{{domxref("DOMString")}}{{domxref('PerformanceMark')}}markThe name used when the mark was created by calling {{domxref("Performance.mark","performance.mark()")}}.
{{domxref("DOMString")}}{{domxref('PerformanceMeasure')}}measurename used when the measure was created by calling {{domxref("Performance.measure","performance.measure()")}}.
{{domxref("DOMString")}}{{domxref('PerformancePaintTiming')}}paintEither 'first-paint' or 'first-contentful-paint'.
+ +

用例

+ +

下面的例子是 name 属性的用法.

+ +
function run_PerformanceEntry() {
+  log("PerformanceEntry support ...");
+
+  if (performance.mark === undefined) {
+    log("... performance.mark Not supported");
+    return;
+  }
+
+  // Create some performance entries via the mark() method
+  performance.mark("Begin");
+  do_work(50000);
+  performance.mark("End");
+
+  // Use getEntries() to iterate through the each entry
+  var p = performance.getEntries();
+  for (var i=0; i < p.length; i++) {
+    log("Entry[" + i + "]");
+    check_PerformanceEntry(p[i]);
+  }
+}
+  //
+  //例如上面p中一个entry p[0] = {
+  //  "name": "document",
+  //  "entryType": "navigation",
+  //  "startTime": 0,
+  //  "duration": 3611.26,
+  //  "initiatorType": "navigation",
+  //  "nextHopProtocol": "http/1.1",
+  //  "workerStart": 0,
+  //  "redirectStart": 0,
+  //  "redirectEnd": 0,
+  //  "fetchStart": 0.32,
+  //  "domainLookupStart": 17.64,
+  //  "domainLookupEnd": 17.78,
+  //  "connectStart": 17.86,
+  //  "connectEnd": 18.1,
+  //  "secureConnectionStart": 0,
+  //  "requestStart": 18.3,
+  //  "responseStart": 294.06,
+  //  "responseEnd": 1610.3600000000001,
+  //  "transferSize": 97683,
+  //  "encodedBodySize": 97112,
+  //  "decodedBodySize": 97112,
+  //  "unloadEventStart": 1614.8372840721554,
+  //  "unloadEventEnd": 1619.1600105887128,
+  //  "domInteractive": 3110.767514889843,
+  //  "domContentLoadedEventStart": 3125.859851800787,
+  //  "domContentLoadedEventEnd": 3438.5779820633365,
+  //  "domComplete": 3609.999662153349,
+  //  "loadEventStart": 3610.017623620869,
+  //  "loadEventEnd": 3611.2672285754975,
+  //  "type": "reload",
+  //  "redirectCount": 0
+  //}
+
+  //下面的函数check_PerformanceEntry的参数obj就是上面的p[0]
+  //
+function check_PerformanceEntry(obj) {
+  var properties = ["name", "entryType", "startTime", "duration"];
+  var methods = ["toJSON"];
+
+  for (var i=0; i < properties.length; i++) {
+    // check each property
+    var supported = properties[i] in obj;
+    if (supported)
+      log("..." + properties[i] + " = " + obj[properties[i]]);
+    else
+      log("..." + properties[i] + " = Not supported");
+  }
+  for (var i=0; i < methods.length; i++) {
+    // check each method
+    var supported = typeof obj[methods[i]] == "function";
+    if (supported) {
+      var js = obj[methods[i]]();
+      log("..." + methods[i] + "() = " + JSON.stringify(js));
+    } else {
+      log("..." + methods[i] + " = Not supported");
+    }
+  }
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Performance Timeline Level 2', '#dom-performanceentry-name', 'name')}}{{Spec2('Performance Timeline Level 2')}} 
{{SpecName('Performance Timeline', '#dom-performanceentry-name', 'name')}}{{Spec2('Performance Timeline')}}Initial definition.
+ +

Browser compatibility

+ +
+
+ + +

{{Compat("api.PerformanceEntry.name")}}

+
+
diff --git a/files/zh-cn/web/api/performanceentry/tojson/index.html b/files/zh-cn/web/api/performanceentry/tojson/index.html new file mode 100644 index 0000000000..0012bc60f7 --- /dev/null +++ b/files/zh-cn/web/api/performanceentry/tojson/index.html @@ -0,0 +1,105 @@ +--- +title: PerformanceEntry.toJSON() +slug: Web/API/PerformanceEntry/toJSON +tags: + - PerformanceEntry.toJSON() +translation_of: Web/API/PerformanceEntry/toJSON +--- +
{{APIRef("Performance Timeline API")}}
+ +

toJSON() 方法是一个串行器( serializer ); 它返回{{domxref("PerformanceEntry","performance entry")}}对象的一个JSON表示形式。

+ +

Syntax

+ +
const json = perfEntry.toJSON();
+
+ +

Arguments

+ +
+
None
+
 
+
+ +

Return value

+ +
+
json
+
A JSON object that is the serialization of the {{domxref("PerformanceEntry")}} object.
+
+ +

Example

+ +

The following example shows the use of the toJSON() method.

+ +
function run_PerformanceEntry() {
+  log("PerformanceEntry support ...");
+
+  if (performance.mark === undefined) {
+    log("... performance.mark Not supported");
+    return;
+  }
+
+  // Create some performance entries via the mark() method
+  performance.mark("Begin");
+  do_work(50000);
+  performance.mark("End");
+
+  // Use getEntries() to iterate through the each entry
+  var p = performance.getEntries();
+  for (var i=0; i < p.length; i++) {
+    log("Entry[" + i + "]");
+    check_PerformanceEntry(p[i]);
+  }
+}
+function check_PerformanceEntry(obj) {
+  var properties = ["name", "entryType", "startTime", "duration"];
+  var methods = ["toJSON"];
+
+  for (var i=0; i < properties.length; i++) {
+    // check each property
+    var supported = properties[i] in obj;
+    if (supported)
+      log("..." + properties[i] + " = " + obj[properties[i]]);
+    else
+      log("..." + properties[i] + " = Not supported");
+  }
+  for (var i=0; i < methods.length; i++) {
+    // check each method
+    var supported = typeof obj[methods[i]] == "function";
+    if (supported) {
+      var js = obj[methods[i]]();
+      log("..." + methods[i] + "() = " + JSON.stringify(js));
+    } else {
+      log("..." + methods[i] + " = Not supported");
+    }
+  }
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Performance Timeline Level 2', '#dom-performanceentry', 'toJSON')}}{{Spec2('Performance Timeline Level 2')}}Initial definition of toJSON() method.
+ +

Browser compatibility

+ +
+
+ + +

{{Compat("api.PerformanceEntry.toJSON")}}

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