PerformanceObserverEntryList: getEntries() ã¡ã½ãã
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2020å¹´1æä»¥éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
getEntries() 㯠PerformanceObserverEntryList ã¤ã³ã¿ã¼ãã§ã¤ã¹ã®ã¡ã½ããã§ãæç¤ºçã«ç£è¦ãããããã©ã¼ãã³ã¹é
ç®ãªãã¸ã§ã¯ãã®ãªã¹ããè¿ãã¾ãããã®ãªã¹ãã®ã¡ã³ãã¼ã¯ãobserve() ã¡ã½ãããå¼ãã§æå®ãããé
ç®åã®ã»ããã«ãã£ã¦æ±ºå®ããã¾ãããã®ãªã¹ãã¯ããªãã¶ã¼ãã¼ã®ã³ã¼ã«ããã¯é¢æ°ï¼ã³ã¼ã«ããã¯ã®æåã®å¼æ°ï¼ã§å©ç¨ã§ãã¾ãã
æ§æ
getEntries()
è¿å¤
æç¤ºçã«ç£è¦ããã PerformanceEntry ãªãã¸ã§ã¯ãã®ãªã¹ããé
ç®ã¯ãé
ç®ã®startTime ã«åºã¥ãã¦æç³»åé ã«æ´åããã¾ãã ãªãã¸ã§ã¯ããè¦ã¤ãããªãå ´åã¯ã空ã®ãªã¹ããè¿ããã¾ãã
ä¾
>getEntries, getEntriesByName, getEntriesByType ã®æ±ã
次ã®ä¾ã¯ãgetEntries()ãgetEntriesByName()ãgetEntriesByType() ã®åã¡ã½ããã®éãã示ãã¦ãã¾ãã
const observer = new PerformanceObserver((list, obs) => {
// ãã¹ã¦ã®é
ç®ããã°åºå
let perfEntries = list.getEntries();
perfEntries.forEach((entry) => {
console.log(`${entry.name} ã®æé: ${entry.duration}`);
});
// "debugging" ã¨ããååã® "measure" åã®é
ç®ããã°åºå
perfEntries = list.getEntriesByName("debugging", "measure");
perfEntries.forEach((entry) => {
console.log(`${entry.name} ã®æé: ${entry.duration}`);
});
// "mark" åã®é
ç®ããã°åºå
perfEntries = list.getEntriesByType("mark");
perfEntries.forEach((entry) => {
console.log(`${entry.name} ã®éå§æå»: ${entry.startTime}`);
});
});
// ãã¾ãã¾ãªããã©ã¼ãã³ã¹ã¤ãã³ãåãç£è¦
observer.observe({
entryTypes: ["mark", "measure", "navigation", "resource"],
});
仿§æ¸
| 仿§æ¸ |
|---|
| Performance Timeline > # dom-performanceobserverentrylist-getentries > |