Navigation Timingの勉強しています。
「HTML5プロフェッショナル認定試験 レベル2 対策テキスト&問題集 Ver2.0対応版 P303」の
コードの内容が分かりません。
自分なりの解釈を書きます。
（１）「performance.timing.navigationStart;」はページを開こうとした瞬間のタイムスタンプが、
「new Date().getTime();」にはこの命令文が実行された時点のタイムスタンプがそれぞれ格納されている。
（２）イベントと命令文が処理される順序としては、navigationStartの方が先になるということでしょうか。
getTime()の方が先に記述されているだけに、こちらの方が先に処理されているようにも思えるのですが、
その辺が良く分かりません。
アドバイスをよろしくお願い致します。
<!DOCTYPE html>
<html lang='jp'>
<head>
<meta charset='UTF-8'>
<script type="text/javascript">
function onLoad(){
var now = new Date().getTime();
var page_load_time = now - performance.timing.navigationStart;
alert("User-perceived page loading time: " + page_load_time);
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
【追記】
「new Date().getTime()」の処理されるタイミングと記述箇所の関係が分かりにくいです。
まずは「その記述箇所によって同じ命令でもタイムスタンプが変わる」という理解が違っていると思います。
とのご指摘を頂きましたが、下記のサイトの説明ではタイムスタンプは変化していると思います。
https://pisuke-code.com/javascript-measure-processing-time/
https://ja.javascript.info/date
Date.now()
下記の考え方で合っていると思うのですが、どうでしょうか？
(1) 「var now = new Date().getTime();」の命令は記述された箇所で実行され、
変数nowにはUNIXエポックからの経過時間[ms]が入る。
(2) 「performance.timing.navigationStartには、以前のページがアンロード完了したタイミングのUNIXエポックからの経過時間[ms]がこのJavaScriptを実行するより前に入っています。」
(3) (2)故にnavigationStartには、例え記述された箇所が「var now = new Date().getTime();」の
後であってもそれ以前の経過時間（unload完了のタイミングの経過時間）が入ることになる。
(4) 両者の差を求めることによりページのロードに掛かった時間が得られる。
Q&A
