So What!?

カテゴリ

記事

連絡先

何か間違っている情報などがあればTwitterにてメッセージください。

ご注意

このBlogはアクセスデータをGoogle Analyticsおよび、Cloudflare Analyticsに送信しています。また研究開発用にSentryにパフォーマンスデータを送信しています。それ以外のデータは収集していません。

超速本

2019年7月21日

Webパフォーマンスの基礎から応用までがまとまった「超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる」通称「超速本」。 本の内容を書いても仕方がないので、読んだ時に自分が知らなかった用語と仕組みをまとめた。なんとなーく理解しているレベル。

  • TCP3ウェイハンドシェイク

TCPはデータの転送を開始する前に、転送元と転送先で転送を開始して良いかどうかの確認をとる。

  1. 転送元から転送先へのコネクション確認
  2. 転送先からの応答と、転送先から転送元へのコネクション確認
  3. 転送元からの応答

この3つのステップをTCP 3ウェイハンドシェイクという。 HTTP/2では、1つのコネクションにストリームを作ることでリクエスト/レスポンスを非同期多重化できるようになったため、ファイルを無理やり一つにまとめてリクエスト数を減らすよりは、ファイルを分割して適切にキャッシュさせた方がパフォーマンスがあがることがある。

  • TCPスロースタート

ネットワークはトラフィックが少ない時にたくさんのデータを送信したほうが効率が良いという特徴がある。もちろん逆も然り。 しかし、アプリケーションがデータの送信をするときにどの程度の量を送信すればいいか判断することができない。そのため、最初は少量から、徐々に量を増やしていくことをスロースタートという。 スロースタートはネットワークに大量のデータが流れ込むこと(輻輳)を防ぐ役割もある。

  • ドメインシャーディング

複数のドメインにリソースを分散させることで同時に接続するコネクションを増やす手法。ドメイン用意したりする必要があったり、それぞれ名前解決が必要だったりなどの欠点がある。

  • サーバプッシュ

サーバプッシュは文字通り、サーバからプッシュする。つまり、リクエストがなくてもレスポンスを返す方法。特定のリクエストから、その後リクエストが来るであろうリソースをリクエストが来る前にレスポンスを返しちゃう。

GREEさんのブログが非常にわかりやすくて参考になりました。HTTP/2の概要も少し書いてあります。

  • ラウンドトリップ

リクエストを飛ばしてからレスポンスが帰ってくるまでの一連の過程。かかった時間をラウンドトリップタイム(RTT)という。

優先度が低い処理をブラウザが落ち着いたときに初めて実行させるメソッド。これは使えそう。

  • プリロードスキャン

JavaScriptはブラウザの構文解析に干渉することができるため、本来であればJSの実行が終わるまで解析を開始することができなかった。 それだと効率が悪いので、予備的な解析機を用意してあらかじめスキャンすることをプリロードスキャンという(多分) 全てのブラウザがスキャナーを備えているわけではないらしい。

その他

ひとつ気になったのは、HTTPSの場合はHTTPの接続に追加で暗号化の情報をやりとりするのでHTTPSのほうが処理が増えて遅いのかな? と思ったら、HTTP vs HTTPS Testというサイトがあった。HTTPSのほうが圧倒的に速かった。 その理由はどうやらSPDYによるものらしい。 Web表示の高速化を実現するSPDYとHTTP/2.0の標準化がわかりやすかった。