t_hazawaの日記

株式投資とWebエンジニアリングのブログです。株式投資の目次は→です。 https://t-hazawa.hatenablog.com/entry/2021/02/12/220933

JavaScript中級者になろう 15章を読んだ (Web Performance)

Webエンジニアリング

前: 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

  • この章は短いのかな

  • navigation timing apiは、ページを表示するときの時間経過とかを知ることができるapi

  • 時間に関する情報を表す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分