PerformanceEntry: name ããããã£
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2017å¹´9æä»¥éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
ã¡ã¢: ãã®æ©è½ã¯ã¦ã§ãã¯ã¼ã«ã¼å ã§å©ç¨å¯è½ã§ãã
name 㯠PerformanceEntry ã¤ã³ã¿ã¼ãã§ã¤ã¹ã®èªã¿åãå°ç¨ããããã£ã§ãããã©ã¼ãã³ã¹é
ç®ã®ååã表ãæååã§ããããã¯èå¥åã®å½¹å²ãæããã¾ããã䏿ã§ããå¿
è¦ã¯ããã¾ãããå¤ã¯ãµãã¯ã©ã¹ã«ä¾åãã¾ãã
å¤
æååã§ãã以ä¸ã®è¡¨ã«ç¤ºãããã«ãå¤ã¯ä¸è¨ã®è¡¨ã«ããéãã PerformanceEntry ãªãã¸ã§ã¯ãã®ãµãã¯ã©ã¹ã«ãã£ã¦ç°ãªãã¾ãã
| ãµãã¯ã©ã¹ | å¤ |
|---|---|
LargestContentfulPaint |
常ã«ç©ºæååãè¿ãã¾ãã |
LayoutShift |
常㫠"layout-shift" ãè¿ãã¾ãã |
PerformanceElementTiming |
æ¬¡ã®æååã®ããããã§ãã
|
PerformanceEventTiming |
é¢é£ããã¤ãã³ãã®åã§ãã |
PerformanceLongTaskTiming |
æ¬¡ã®æååã®ããããã§ãã
|
PerformanceMark |
performance.mark() ãå¼ã³åºãããã¨ã§ãã¼ã¯ã使ãããã¨ãã«ä½¿ç¨ãããååã§ãã
|
PerformanceMeasure |
performance.measure() ãå¼ã³åºãã¦ããã¨ã§ææ¨ã使ãããã¨ãã«ä½¿ç¨ãããååã§ãã
|
PerformanceNavigationTiming |
ãªã¯ã¨ã¹ãããããªã½ã¼ã¹ã®è§£æ±ºããã URL ã§ãããªã¯ã¨ã¹ãããªãã¤ã¬ã¯ãããã¦ããã®å¤ã¯å¤ããã¾ããã |
PerformancePaintTiming |
æ¬¡ã®æååã®ããããã§ãã
|
PerformanceResourceTiming |
ãªã¯ã¨ã¹ãããããªã½ã¼ã¹ã®è§£æ±ºããã URL ã§ãããªã¯ã¨ã¹ãããªãã¤ã¬ã¯ãããã¦ããã®å¤ã¯å¤ããã¾ããã |
TaskAttributionTiming |
常㫠"unknown" ãè¿ãã¾ãã |
VisibilityStateEntry |
æ¬¡ã®æååã®ããããã§ãã
|
ä¾
>ããã©ã¼ãã³ã¹é ç®ãååã§çµãè¾¼ã¿
PerformanceEntry ã PerformanceResourceTiming ãªãã¸ã§ã¯ãã§ããå ´åãname ããããã£ã¯ãªã¯ã¨ã¹ãããããªã½ã¼ã¹ã®è§£æ±ºãã URL ãåç
§ãã¾ãã
ãã®ä¾ã§ã¯ãname ããããã£ã¯åºæã®ãªã½ã¼ã¹ãä¾ãã°ãã¹ã¦ã® SVG ç»åããã£ã«ã¿ãªã³ã°ããã®ã«æçã§ãã
// SVG ãªã½ã¼ã¹ã®å¦çæéããã°åºå
performance.getEntriesByType("resource").forEach((entry) => {
if (entry.name.endsWith(".svg")) {
console.log(`${entry.name}'s duration: ${entry.duration}`);
}
});
ããã©ã¼ãã³ã¹é ç®ãååã§åå¾
Performance 㨠PerformanceObserver ã¯ã©ã¡ããããã©ã¼ãã³ã¹é
ç®ãç´æ¥ååã§åå¾ããã¡ã½ãããæä¾ãã¦ãã¾ãã代ããã« Performance.getEntriesByName() ã¾ã㯠PerformanceObserverEntryList.getEntriesByName() ã使ç¨ãããã¨ãã§ãã¾ãã
// ãã®æç¹ã§ã® "debug-marks" ã¨ããååã®ãã¼ã¯ããã¹ã¦ãã°åºå
const debugMarks = performance.getEntriesByName("debug-mark", "mark");
debugMarks.forEach((entry) => {
console.log(`${entry.name}'s startTime: ${entry.startTime}`);
});
// PerformanceObserver ç
// "debug-marks" ã¨ããååã®ãã¼ã¯ãçºçããããã¹ã¦ãã°åºå
function perfObserver(list, observer) {
list.getEntriesByName("debug-mark", "mark").forEach((entry) => {
console.log(`${entry.name}'s startTime: ${entry.startTime}`);
});
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });
仿§æ¸
| 仿§æ¸ |
|---|
| Performance Timeline > # dom-performanceentry-name > |