Performance: mark() ã¡ã½ãã
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2017å¹´9æä»¥éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
mark() ã¡ã½ããã¯ãååä»ã PerformanceMark ãªãã¸ã§ã¯ããçæãããã©ã¦ã¶ã¼ã®ããã©ã¼ãã³ã¹ã¿ã¤ã ã©ã¤ã³ã«é«è§£å度ã®ã¿ã¤ã ã¹ã¿ã³ããã¼ã«ã¼ã表示ãã¾ãã
æ§æ
mark(name)
mark(name, markOptions)
弿°
name-
æååã§ããã¼ã¯ã®ååã表ãã¾ãã鿍奍ã®
PerformanceTimingã¤ã³ã¿ã¼ãã§ã¤ã¹ã®ããããã£ã®ããããã¨åãååã§ãã£ã¦ã¯ããã¾ããã markOptionsçç¥å¯-
ãã®ãã¼ã¯ã®ããã«ã¿ã¤ã ã¹ã¿ã³ãã¨è¿½å ã®ã¡ã¿ãã¼ã¿ãæå®ããããã®ãªãã¸ã§ã¯ãã§ãã
detailçç¥å¯-
ãã¼ã¯ã«å«ããä»»æã®ã¡ã¿ãã¼ã¿ã§ããæ¢å®å¤ã¯
nullã§ããæ§é åã¯ãã¼ã³å¯è½ã§ãªããã°ãªãã¾ããã startTimeçç¥å¯-
ãã¼ã¯ã®æå»ã¨ãã¦ä½¿ç¨ãã
DOMHighResTimeStampã§ããæ¢å®å¤ã¯performance.now()ã§ãã
è¿å¤
çæããã PerformanceMark é
ç®ã§ãã
ä¾å¤
SyntaxError:nameã鿍奍ã®PerformanceTimingã¤ã³ã¿ã¼ãã§ã¤ã¹ã®ããããã£ã®ããããã§ããå ´åã«çºçãã¾ããä¸è¨ã®ä¾ãåç §ãã¦ãã ãããTypeError:startTimeãè² ã®å ´åã«çºçãã¾ãã
ä¾
>ååä»ãã®ãã¼ã«ã¼ãçæ
次ã®ä¾ã§ã¯ãmark() ã使ç¨ãã¦ååä»ã PerformanceMark é
ç®ã使ãã¦ãã¾ããåãååã®ãã¼ã¯ãè¤æ°ä½æãããã¨ãã§ãã¾ããã¾ããããããå²ãå½ã¦ã¦ã使ãã PerformanceMark ãªãã¸ã§ã¯ãã¸ã®åç
§ãä¿æãããã¨ãã§ãã¾ãã
performance.mark("login-started");
performance.mark("login-started");
performance.mark("login-finished");
performance.mark("form-sent");
const videoMarker = performance.mark("video-loaded");
詳細ä»ãã®ãã¼ã«ã¼ãçæ
ããã©ã¼ãã³ã¹ãã¼ã¯ã¯ markOptions ãªãã¸ã§ã¯ãã使ç¨ãã¦è¨å®ãããã¨ãã§ããdetail ããããã£ã«ä»»æã®åã®è¿½å æ
å ±ãå
¥åãããã¨ãã§ãã¾ãã
performance.mark("login-started", {
detail: "ãã°ã¤ã³ã¯ãããã¡ãã¥ã¼ã®ãã°ã¤ã³ãã¿ã³ã使ç¨ãã¦éå§ããã¾ããã",
});
performance.mark("login-started", {
detail: { htmlElement: myElement.id },
});
éå§æå»ä»ãã®ãã¼ã«ã¼ã使
mark() ã¡ã½ããã®æ¢å®ã§ã¯ãã¿ã¤ã ã¹ã¿ã³ã㯠performance.now() ã§ããmarkOptions ã® startTime ãªãã·ã§ã³ã使ç¨ããã¨ãå¥ã®æå»ã«è¨å®ãããã¨ãã§ãã¾ãã
performance.mark("start-checkout", {
startTime: 20.0,
});
performance.mark("login-button-pressed", {
startTime: myEvent.timeStamp,
});
äºç´æ¸ã¿ã®åå
徿¹äºææ§ãä¿ã¤ãããéæ¨å¥¨ã® PerformanceTiming ã¤ã³ã¿ã¼ãã§ã¤ã¹ã®ä¸é¨ã§ããååã¯ä½¿ç¨ã§ããªããã¨ã«æ³¨æãã¦ãã ãããæ¬¡ã®ä¾ã¯ä¾å¤ãçºçãã¾ãã
performance.mark("navigationStart");
// SyntaxError: "navigationStart" is part of
// the PerformanceTiming interface,
// and cannot be used as a mark name
仿§æ¸
| 仿§æ¸ |
|---|
| User Timing > # dom-performance-mark > |