前: JavaScript中級者になろう 14章を読んだ (データのローカル保存) - t_hazawaの日記
経緯
- JSちからをつけてる
- 15章はかなり短かったが、次の16章(ES2015-2017)はとても長いので一旦ブログにする
- 16章は前半と後半でブログにしたい
- まったく知らなかった Web Performance。 読んだらわかった
学習
十五章第一回 Page Visibility
https://uhyohyo.net/javascript/15_1.html
- サクサク動くためのものらしい
web performanceはそのような目的で作られた一連の仕様のこと
ユーザーが今このタブを見ているか他のタブを見ているか知ることができるもの documentのもつhiddenプロパティ visibilityStateプロパティ
- 短そう
そのページのウィンドウが他のウィンドウに完全に隠されていたり最小化されていたりしたらtrueで、一部分でも見えていたらfalse
- prerender unloaded(hiddenから別のページに行こうとしてる時)
Documentで発生するvisibilitychangeイベント
現在のブラウザの動作を見るに、他のタブを見たりブラウザを最小化すると見えなくなったと判定され、他のウィンドウを上からかぶせただけでは見えなくなったとは認識しないようです。
短かった 2021/12/16 0:07 9m
十五章第二回 Navigation Timing
https://uhyohyo.net/javascript/15_2.html
- この章は短いのかな
時間に関する情報を表すPerformanceTimingとその他に関するPerformanceNavigationです。
- window.performance 。 performance で呼べるぞ
PerformanceTimingはさまざまなタイミングを時刻で表すプロパティを持っています。
UNIX timeというときはミリ秒ではなく秒数で表すことが多いようですが、JavaScriptではミリ秒とすることのほうが多いです
navigationStart 簡単に言えば、このページを開こうとした瞬間です。もうちょっと詳しく言うと、前のページでbeforeunloadイベントの処理が終了したあとunloadイベントが発生する直前の瞬間です。
- ページ異動するときは、まず前のページで unload イベントが発生するのだなあ
- fetchStart とかをブラウザが知っテルトイウコトだね
- ブラウザなので、サーバでは知れないことも知れて新鮮
- type_navigate みたいな、どういうロード操作かもとれるよ
- リダイレクト回数もあるよ
2021/12/16 0:21 22m よみおわ
十五章第三回 Performance Timeline
https://uhyohyo.net/javascript/15_3.html
- PerformanceEntry
- window.performance に、 このEntry オブジェクトの形でもさっきの(？)情報は入ってるらしい
- duration とかあるので便利かも
その精度は最大で0.001ミリ秒
- performance.getEntries() getEntriesByType getEntriesByName
yomiowa 2021/12/16 0:25 26m
十五章第四回 Resource Timing
https://uhyohyo.net/javascript/15_4.html
十五章第二回で紹介したnavigation timingと似ていますね。あちらはページ本体に読み込みにかかった時間であり、本体が読み込み完了してhtmlのパース・domの構築まで終わったら読み込み完了としていたので、外部リソースに読み込みにかかった時間までは測れませんでした。
ページから読み込まれた外部リソース一つ一つについてperformanceresourcetimingオブジェクトが作成され、window.performanceに登録されます nameプロパティには、リソースのurlが入っています
2021/12/16 23:12 1m
- いろんなページで コンソールで console.log(performance.getEntriesByType("resource")); してみよう
リソースを読み込む際にサーバー側がTiming-Allow-Originレスポンスヘッダを指定した場合は、他のオリジンであっても時間の情報を取得することができます。
- マイナーHTTPヘッダー
- performance.onresourcetimingbufferfull=function(e){ }; とすることによってもイベントハンドラは登録可能
おわり 2021/12/16 23:17 6m
十五章第五回 User Timing
https://uhyohyo.net/javascript/15_5.html
- 自分で performance オブジェクトにタイミング追加できる マークを登録する
performance.mark("mymark");
- 2つのマーク間の時間を計ることもできるので便利
開始点と終了点はマークの名前を指定しますが、同じ名前で複数のマークが登録されていた場合、最も新しいものが使用されます。
ちなみに、measureメソッドの第二引数・第三引数はマーク名ですが、他にもPerformanceTimingのプロパティ名を指定することで、そのタイミングとの差をとることができます。たとえば、
- performance.measure("test","navigationStart","end");
2021/12/16 23:25 読み終 14m
時間まとめ
- 2021/12/15,16
- 30 + 10 + 10(ブログ)= 50分
- 累計: 1651分
