Webブラウザのお仕事

Transcript

1. 8&#ϒϥ΢βͷ͓࢓ࣄ
2. ͸͡Ίʹ • 「WEBサイトを閲覧」するとき多くの場合WEBブラウザを使⽤することになる • 今回お話しするのはWEBブラウザを使っているその時、裏側では何が起きているか？に ついて • WEBを主戦場とする仕事をしている以上ぜひ知っておきたいWEBブラウザのお仕事の内 容をなるべく簡単になるよう図を⽤いて説明していく • これらを知っておくことでひょんな時に問題解決の⽷⼝になったりすることがあるので ぜひ頭の隅に置いていただけると幸いです🙌
4. ͜͜ͷ ΤϦΞ
5. example.com ブラウザでアドレスバーに URLを⼊⼒しEnterを押す DNS サーバー DNS キャッシュ サーバー ブラウザ Operation System Router ISP キャッシュなし キャッシュあり 次の処理へ(8ページ⽬へ) ルートネーム サーバー ネーム サーバー ネーム サーバー 名前解決 順番に各ネーム サーバーへアクセス してIPとURLを結び つける作業を⾏う その後情報をキャッ シュサーバーへ保存 ① ② ③ example.com || 93.184.216.84 ブラウザにキャッシュが あるかどうかで処理を 分ける 名前解決に失敗
6. 名前解決に失敗したときの表⽰
7. ͜͜ͷ ΤϦΞ
8. DNS サーバー TCP通信の 初期化 クライアント サーバー SYN SYN ACK ACK 送るよ 受け取ったよ 3Way Handshake ：TCP通信の際に使⽤される接続⽅法 ここで外部のサーバーとの安全な通信を確⽴する HTTP リクエスト リクエストライン リクエストヘッダー メッセージボディ GET/HTTP/1.1 Host: client.hogehoge.com User-Agent: Mozilla/5.0 Accept: */* なし 接続先サーバーへの 要求内容の詳細 受け取ったよ 送るよ！ グローバルな インターネットへ 通信時に使うお約束事(通信プロトコル)のひとつ その中でも安全性重視の通信⽅法 5$1
9. ͜͜ͷ ΤϦΞ
10. HTTPレスポンス ステータスライン レスポンスヘッダー メッセージボディ HTTP/2 200 <!doctype html> <html> <head> <title>ほげほげサイト</title> </head> <body>・・・省略・・・</body> </html> 接続先サーバーからの返ってきた情報の詳細 etag: "de 7-OJQMWJz+xf8wsmQufuQRjAHeH+c” content-type: text/html; charset=utf-8 accept-ranges: none vary: Accept-Encoding X-cloud-trace-context: f3a1f4bba84c09e88367b8d3335822a7;0=1 date: Sat, 06 Mar 2021 13:29:54 GMT server: Google Frontend content-length: 3559 )551εςʔλείʔυ HTTPリクエストの結果を表す３桁の数字 1xx 情報レスポンス 情報が処理中の状態を表す ブラウザ上ではめったに⾒ない 2xx 成功レスポンス リクエストが正常に処理された 状態を表す 3xx リダイレクション リクエストを完了させるために 追加処理が必要な状態を表す 4xx クライアントエラー クライアント(ユーザ)側での操作 や⼊⼒の不備によるエラーの状 態を表す 5xx サーバーエラー サーバー側でシステムエラーが 起きている状態を表す クライアント側では何もできな い 403 Forbidden ファイルやフォルダの閲覧権限が無いなど 404 Not Found Webページが⾒つからない、URLが間違っているなど レスポンス 詳しくはこちら https://www.itmanage.co.jp/column/http-www-request-response-statuscode/
11. ͜͜ͷ ΤϦΞ
12. ブラウザの 内部での処理 HTTP レスポンス https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/ 参考 レンダリングの詳細 User Interface アドレスバー 戻る、進む ブックマークメニュー など Browser engine UIとレンダリングエンジンの間の処理を整理 Rendering engine 要求されたコンテンツの表⽰を担当 Networking HTTP リクエストなどのネットワークの呼び出しに使⽤ JS Interpreter JavaScript コードの解析と実⾏に使⽤ UI Backend 基本的なウィジェットの描画に使⽤ Data Persistence ブラウザ内のデータベース 保存されたパスワード Cookie Session などはここに記憶
13. WEBページの レンダリング Rendering engine HTMLを解析(パース) CSSをパース 画像ファイルなど JSをパース HTMLのパース完了 遅延読み込み設定のJSをパース CSSOMを作成 DOMの作成 DOMの作成完了 レンダリングブロックが 起きるので、サイトの 表⽰スピードを左右する プロセス 0.
    : Object Modelの略 ここではプロパティをツリー状に マップしたものを指す https://coliss.com/articles/build-websites/operation/work/how-the-browser-renders-a-web-page.html https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/ 参考 これらをブラウザ で処理 8&#αΠτ͕ݟΒΕΔʂ
14. (0"-