Performance: measure() ã¡ã½ãã
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2017å¹´9æä»¥éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
measure() ã¡ã½ããã¯ã 2 ã¤ã®ãã¼ã¯éã®æéã表ãååä»ã PerformanceMeasure ãªãã¸ã§ã¯ããããã©ã¦ã¶ã¼ã®ããã©ã¼ãã³ã¹ã¿ã¤ã ã©ã¤ã³ã«ä½æãã¾ãã
2 ã¤ã®ãã¼ã¯éãæ¸¬å®ããã¨ãã¯ãããããéå§ãã¼ã¯ã¨çµäºãã¼ã¯ãããã¾ããååä»ãã¿ã¤ã ã¹ã¿ã³ãã¯ãã¡ã¸ã£ã¼ã¨å¼ã°ãã¾ãã
æ§æ
measure(measureName)
measure(measureName, startMark)
measure(measureName, startMark, endMark)
measure(measureName, measureOptions)
measure(measureName, measureOptions, endMark)
measureName ã®ã¿ãæå®ãããå ´åãéå§ã¿ã¤ã ã¹ã¿ã³ãã¯ã¼ãã«è¨å®ãããï¼æéãè¨ç®ããããã«ä½¿ç¨ãããï¼çµäºã¿ã¤ã ã¹ã¿ã³ã㯠Performance.now() ããè¿ãããå¤ã«ãªãã¾ãã
æååã使ç¨ã㦠PerformanceMark ãªãã¸ã§ã¯ããéå§ãã¼ã¯ã¨çµäºãã¼ã¯ã¨ãã¦èå¥ãããã¨ãã§ãã¾ãã
endMark ã®ã¿æå®ããå ´åã空㮠measureOptions ãªãã¸ã§ã¯ããæä¾ã㦠performance.measure("myMeasure", {}, "myEndMarker") ã®ããã«ããå¿
è¦ãããã¾ãã
弿°
measureName-
æååã§ãã¡ã¸ã£ã¼ã®ååã表ãã¾ãã
measureOptionsçç¥å¯-
ã¡ã¸ã£ã¼ã®ãã¹ã¦ã®ãªãã·ã§ã³ãå«ããªãã¸ã§ã¯ãã§ãã
detailçç¥å¯-
ãã¼ã¯ã«å«ããä»»æã®ã¡ã¿ãã¼ã¿ã§ããæ¢å®å¤ã¯
nullã§ããæ§é åã¯ãã¼ã³å¯è½ã§ãªããã°ãªãã¾ããã startçç¥å¯-
éå§æå»ã¨ãã¦ä½¿ç¨ããã
DOMHighResTimeStampã®ã¿ã¤ã ã¹ã¿ã³ããã¾ãã¯éå§ãã¼ã¯ã«ä½¿ç¨ãããæååã§ããããã
PerformanceMarkã«ååãä»ããæååã§ããå ´åãstartMarkã¨åãæ¹æ³ã§å®ç¾©ããã¾ãã durationçç¥å¯-
éå§ã¨çµäºã®ãã¼ã¯æå»éã®æéï¼ããªç§åä½ï¼ãçç¥ããå ´åã¯æ¢å®å¤ã
performance.now()ã¨ãªããã³ã³ããã¹ãã使ããã¦ããçµéããæå»ã¨ãªãã¾ããæå®ãããå ´åã¯startã¨endã®ã©ã¡ãããæå®ããå¿ è¦ãããã¾ããã両æ¹ãæå®ãããã¨ã¯ã§ãã¾ããã endçç¥å¯-
çµäºæå»ã¨ãã¦ä½¿ç¨ããã
DOMHighResTimeStampã®ã¿ã¤ã ã¹ã¿ã³ããã¾ãã¯çµäºæå»ã®PerformanceMarkã«ååãä»ããæååã§ãã ãããPerformanceMarkã«ååãä»ããæååã§ããå ´åãendMarkã¨åãããã«å®ç¾©ãã¾ãã
startMarkçç¥å¯-
ããã©ã¼ãã³ã¹ã¿ã¤ã ã©ã¤ã³ã®
PerformanceMarkã«ååãä»ããæååã§ãããã®ãã¼ã¯ã®PerformanceEntry.startTimeããããã£ãã¡ã¸ã£ã¼ã®è¨ç®ã«ä½¿ç¨ããã¾ãã endMarkçç¥å¯-
ããã©ã¼ãã³ã¹ã¿ã¤ã ã©ã¤ã³ã®
PerformanceMarkã«ååãä»ããæååã§ãããã®ãã¼ã¯ã®PerformanceEntry.startTimeããããã£ãã¡ã¸ã£ã¼ã®è¨ç®ã«ä½¿ç¨ããã¾ãã ãã®å¼æ°ã渡ãããå ´åã¯ãstartMarkã¾ãã¯ç©ºã®measureOptionsãªãã¸ã§ã¯ããæ¸¡ãå¿ è¦ãããã¾ãã
è¿å¤
çæããã PerformanceMeasure ã®é
ç®ã§ãã
è¿ãããã¡ã¸ã£ã¼ã«ã¯ã以ä¸ã®ããããã£å¤ã«ãªãã¾ãã
-
entryType- "measure" ãè¨å®ããã¾ãã -
name- "name" 弿°ãè¨å®ããã¾ãã -
startTime- 以ä¸ã®ããã«è¨å®ããã¾ããmeasureOptions.startã§æå®ãããå ´åã¯timestampãmeasureOptions.startã¾ãã¯startMarkã§æå®ãããå ´åã¯ãéå§ãã¼ã¯ã®ã¿ã¤ã ã¹ã¿ã³ããmeasureOptions.endã¨measureOptions.durationããè¨ç®ãããã¿ã¤ã ã¹ã¿ã³ãï¼measureOptions.startãæå®ããã¦ããªãå ´åï¼ã- æå®ããã¦ããããä»ã®å¤ããç¹å®ãããã¨ãã§ããªãå ´å㯠0ã
-
duration-DOMHighResTimeStampã§ãçµäºã¿ã¤ã ã¹ã¿ã³ãããstartTimeãå¼ãã¦è¨ç®ãããã¡ã¸ã£ã¼ã®æéãè¨å®ãã¾ããçµäºã¿ã¤ã ã¹ã¿ã³ãã¯ä»¥ä¸ã®ããããã«ãªãã¾ãã
measureOptions.endã§æå®ãããå ´åã¯timestampãmeasureOptions.endã¾ãã¯endMarkã§æå®ãããå ´åã¯ãçµäºãã¼ã¯ã®ã¿ã¤ã ã¹ã¿ã³ããmeasureOptions.startã¨measureOptions.durationããè¨ç®ãããã¿ã¤ã ã¹ã¿ã³ãï¼measureOptions.endãæå®ããã¦ããªãå ´åï¼ã- çµäºãã¼ã¯ãæå®ããã¦ããªãããä»ã®å¤ããç¹å®ãããã¨ãã§ããªãå ´åã¯ã
Performance.now()ã§è¿ãããå¤ã
-
detail-measureOptionsã§æ¸¡ãããå¤ã«è¨å®ããã¾ãã
ä¾å¤
TypeError-
start, end, duration ã®ãããããææ§ã«ãªãå ´åã«çºçãã¾ãã
endMarkã¨measureOptionsã®ä¸¡æ¹ãæå®ããããmeasureOptionsãæå®ãããããstartããã³endã¡ã³ãã¼ãæå®ãããªãã£ããmeasureOptionsãstart,end,durationã®ã¡ã³ãã¼ãã¹ã¦ããç¶æ ï¼ããã¦ä¸æ´åãªç¶æ ï¼ã§æå®ãããã
SyntaxErrorDOMException-
ãã®ååã®ãã¼ã¯ãåå¨ããªãå ´åã«çºçãã¾ãã
endMarkã¾ãã¯measureOptions.endã®ã©ã¡ããã使ç¨ãã¦ã¨ã³ããã¼ã¯ãæå®ãããããä¸è´ããååã®ããã©ã¼ãã³ã¹ãããã¡ã¼ã«PerformanceMarkããªããendMarkã¾ãã¯measureOptions.endã®ã©ã¡ããã使ç¨ãã¦ã¨ã³ããã¼ã¯ãæå®ãããããPerformanceTimingã¤ã³ã¿ã¼ãã§ã¤ã¹ã®èªã¿åãå°ç¨å±æ§ã«å¤æãããã¨ãã§ããªãã- éå§ãã¼ã¯ã
startMarkã¾ãã¯measureOptions.startã®ã©ã¡ããã§æå®ããã¦ããããä¸è´ããååã®ããã©ã¼ãã³ã¹ãããã¡ã¼ã«PerformanceMarkããªãã - éå§ãã¼ã¯ã
startMarkã¾ãã¯measureOptions.startã®ã©ã¡ããã§æå®ããã¦ããããPerformanceTimingã¤ã³ã¿ã¼ãã§ã¤ã¹ã®èªã¿åãå°ç¨å±æ§ã«å¤æãããã¨ãã§ããªãã
DataCloneErrorDOMException-
measureOptions.detailãnull以å¤ã®å¤ã§ããã HTML ã® "StructuredSerialize" ã¢ã«ã´ãªãºã ã§ã·ãªã¢ã©ã¤ãºã§ããªãå ´åã§ãã RangeError-
measureOptions.detailãnull以å¤ã®å¤ã§ããã HTML ã® "StructuredSerialize" ã¢ã«ã´ãªãºã ã§ã·ãªã¢ã©ã¤ãºããéã«ã¡ã¢ãªã¼ãå²ãå½ã¦ãããªãã£ãå ´åã§ãã
ä¾
>ååä»ããã¼ã«ã¼éã®æéã®æ¸¬å®
èªåèªèº«ã§ 2 ã¤ã®ãã¼ã«ã¼ "login-started" 㨠"login-finished" ãæå®ããå ´åãæ¬¡ã®ä¾ã«ç¤ºãããã« "login-duration" ã¨ããååã®æéã使ãããã¨ãã§ãã¾ããè¿ããã PerformanceMeasure ãªãã¸ã§ã¯ã㯠duration ããããã£ãæä¾ãã2 ã¤ã®ãã¼ã«ã¼éã®çµéæéãæç¤ºãã¾ãã
const loginMeasure = performance.measure(
"login-duration",
"login-started",
"login-finished",
);
console.log(loginMeasure.duration);
ç¬èªã®éå§ã¨çµäºã®æå»ã§æéãæ¸¬å®
ããé«åº¦ãªè¨æ¸¬ãè¡ãã«ã¯ã measureOptions 弿°ã渡ããã¨ãã§ãã¾ããä¾ãã°ãéå§æå»ã«ã¯ click ã¤ãã³ã ã® event.timeStamp ããããã£ã使ç¨ãããã¨ãã§ãã¾ãã
performance.measure("login-click", {
start: myClickEvent.timeStamp,
end: myMarker.startTime,
});
ã¡ã¸ã£ã¼ã®è¿½å ã®è©³ç´°ãæä¾
details ããããã£ã使ç¨ãããã¨ã§ãä»»æã®åã®è¿½å æ
å ±ãæä¾ãããã¨ãã§ãã¾ããä¾ãã°ãã©ã® HTML è¦ç´ ãã¯ãªãã¯ãããããè¨é²ãããããããã¾ããã
performance.measure("login-click", {
detail: { htmlElement: myElement.id },
start: myClickEvent.timeStamp,
end: myMarker.startTime,
});
仿§æ¸
| 仿§æ¸ |
|---|
| User Timing > # dom-performance-measure > |