こんにちは、エンジニアのさもです。
同じサイト・ページでもブラウザ（InternetExplorerとかchrome, edgeなど）によって見え方とかボタン・プルダウンの動き方が微妙に違うことって無いですか？
もう身の回りほとんどインターネットになっているので、「エンジニアじゃないけどなんでそうなるのか知ってるよ」という方も多いかと思いますが、サイトにアクセスしてから表示されるまでを順に追いながら、なぜブラウザで表示が違うのか解説したいと思います。
少し長くなっちゃいましたが、最後までお読みください。
スポンサーリンク
登場人物
- サイトを見る人(ブラウザ)
- サーバー
- 欲しいwebサイトを提供しているサーバー
- htmlファイルはこいつが持っている
それでは、ブラウザでURLを入力またはリンクをクリックしてから、ブラウザで画面が表示されるまでの流れを説明します。
リクエスト
知っている方も多いと思いますが、パソコンにはIPアドレスという番号が割り振られています。
この番号は、”所属しているネットワーク内”で識別できるように決まっています。”所属しているネットワーク内”というのは、例えば、同じ無線LANを使っている機器の中でという意味です。
IPアドレスは、PCの住所などと例えられていますが、所属ネットワーク外の別のネットワークには同じIPアドレスを持つパソコンもあるので、名前の方が近いように思っています。
さて、htmlファイルを持っているサーバーにもIPアドレスは割り振られていますが、そんな番号知らないですよね。
googleなら、172.217.24.131 です。ちなみに、ブラウザのアドレスバーに「http://172.217.24.131」と入力して、Enterキーを押すとgoogleのページが開きます。
どんなサーバにもアクセスするにはIPアドレスが基本的なのですが、必要ではありません。IPアドレスの代わりに、google.co.jpという人間に分かりやすい名前でアクセスできます。
なぜそんなことが出来ているかというと、DNS（ドメイン ネーム サーバー）のおかげです。
サーバーって「何らかの処理のリクエストを受けて、結果を返す機械」の総称なんで、いろいろなサーバーがあるんですね。
DNSはgoogle.co.jp(name)を172.217.24.131(domain)へ変換する処理をしてくれています。
ブラウザは、URLを入力したり、リンクをクリックすると、まずDNSへ変換リクエストを送り、IPアドレスを返してもらいます。
帰ってきたIPアドレスを元に、webページのサーバーへ「トップページが欲しい」というリクエストを送ります。
レスポンス
サーバーはリクエスト内容をみて、「トップページが欲しいんだな、よしよし」といって、自分が持っているindex.htmlをブラウザへ送信します。
私の仕事でもある、webエンジニアやサーバサイドエンジニアは、ここの処理の部分をプログラミングしています。
一般的に、個人個人や時間や状態に関係するhtmlはそのものを持っているわけではなくて、サーバ側でhtmlファイルを作って、それをブラウザへ送信しています。
レンダリング
サーバからhtmlファイルをもらった状態では、まだ画面に表示されません。
次はブラウザのお仕事です。
htmlファイルや付属のjavascriptファイル、cssファイルを使って、ブラウザが画面を組み立てていきます。
組み立てるというのは、ブラウザが持っている部品(チェックボックス、プルダウンなど)を、htmlファイルを見ながら画面に並べていく処理のことです。
前置きが長くなってしまいましたが、「なぜブラウザによって見た目が違うのか」の答えは、「ブラウザによって持っている部品が違う」でした。
また、あんまり多く無いですが、新しい目のcssだと、そもそもブラウザがそれに対応する部品をもっていなくて、反映されないなども原因の一つです。
この場合は、代わりのcssをブラウザごとに用意して表示させています。
ブラウザがどの部品をもっていて、どの部品を持っていないのかは、こちらのサイトで確認することが出来ます。
画像取得
実はレンダリングして終わりじゃないんですね。
<img>などで画像などが埋め込まれているhtmlだと、レンダリング後にサーバにもう一度画像取得のリクエストを行います。
画像だけ最後にじわじわと描画されるのはこのためです。
さいごに
いかがでしたでしょうか。
分かりやすい説明を心がけたつもりですが、もし分かりにくい用語や説明がありましたら、教えてください。
読者登録をしていただけると、ブログを続ける励みになりますので、よろしくお願いします。
