Performance: getEntriesByName() ã¡ã½ãã
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2017å¹´9æä»¥éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
getEntriesByName() ã¡ã½ããã¯ãç¾å¨ããã©ã¼ãã³ã¹ã¿ã¤ã ã©ã¤ã³ã«ãããæå®ãããååã¨åã® PerformanceEntry ãªãã¸ã§ã¯ãã®é
åãè¿ãã¾ãã
ç¹å®ã®åã®ããã©ã¼ãã³ã¹é
ç®ã ãã«é¢å¿ãããå ´åã¯ã getEntriesByType() ãåç
§ãã¦ãã ããããã¹ã¦ã®ããã©ã¼ãã³ã¹é
ç®ã®å ´åã¯ã getEntries() ãåç
§ãã¦ãã ããã
ã¡ã¢:
ãã®ã¡ã½ããã¯æ°ããããã©ã¼ãã³ã¹é
ç®ãéç¥ãã¾ããããã®ã¡ã½ãããå¼ã³åºããæç¹ã§ããã©ã¼ãã³ã¹ã¿ã¤ã ã©ã¤ã³ã«åå¨ãã¦ããé
ç®ã®ã¿ãåå¾ãã¾ãã
å©ç¨ã§ããããã«ãªã£ãé
ç®ã®éç¥ãåãåãã«ã¯ã PerformanceObserver ã使ç¨ãã¦ãã ããã
以ä¸ã®é ç®åã¯ãã®ã¡ã½ããã§ã¯ã¾ã£ãã対å¿ãã¦ãããããããã®åã®é ç®ãåå¨ããã¨ãã¦ãè¿ããã¾ããã
"element"(PerformanceElementTiming)"event"(PerformanceEventTiming)"largest-contentful-paint"(LargestContentfulPaint)"layout-shift"(LayoutShift)"longtask"(PerformanceLongTaskTiming)
ãããã®åã®é
ç®ã«ã¢ã¯ã»ã¹ããã«ã¯ã代ããã« PerformanceObserver ã使ç¨ããå¿
è¦ãããã¾ãã
æ§æ
getEntriesByName(name)
getEntriesByName(name, type)
弿°
name-
åå¾ããé ç®ã®ååã§ãã
typeçç¥å¯-
"
mark" ãªã©ãåå¾ããé ç®ã®åãæå¹ãªé ç®åã®ä¸è¦§ã¯PerformanceEntry.entryTypeã«ããã¾ãã
è¿å¤
æå®ããã name 㨠type ãæã¤ PerformanceEntry ãªãã¸ã§ã¯ãã®é
å (Array) ã§ãã
è¦ç´ ã¯é
ç®ã® startTime ã«åºã¥ãã¦æç³»åã«ä¸¦ã³ã¾ããæå®ãããåºæºãæºãããªãã¸ã§ã¯ãããªãå ´åã¯ã空ã®ãªã¹ããè¿ããã¾ãã
ä¾
>ããã©ã¼ãã³ã¹ãã¼ã«ã¼ããã°åºå
次ã®ä¾ã¯ã"debug-mark" ã¨ããååã®ãªãã¸ã§ã¯ã PerformanceMark ããã¹ã¦ãã°åºåãã¾ãã
const debugMarks = performance.getEntriesByName("debug-mark", "mark");
debugMarks.forEach((entry) => {
console.log(`${entry.name}'s startTime: ${entry.startTime}`);
});
仿§æ¸
| 仿§æ¸ |
|---|
| Performance Timeline > # dom-performance-getentriesbyname > |