ブラウザWebエンジニアのためのロードマップに2020版に沿って勉強していきます!今回は基本的なインターネットの知識。受け取ったデータを解析・表示ブラウザレンダリングインターネットはどのように機能するかインターネットとはコンピューター同士を繋いで作ったネットワークの集合体。インターネットの普及インターネットは情報を配信・受信する上で重要存在。Agency)に取り組まれていた複数のネットワークを相互接続するネットワークである「ARPANET」が前身であると言われている。1960年代に構築されたARPANETは1978年に実験を終了し、運用ネットワークとなった。Protocol)を組み合わせたもの。Protocol)というプロトコルであった。1973年に「TCP/IP」の開発が始まり、1974年11月に公開された。同じ年に「Ethernet」も登場した。1981年9月にTCP/IPはRFCとして文書化され、ARPANETの標準プロトコルに採用された。して、現在のTCP/IPを中核とするプロトコルのスイート(群)が確立した。1983年にはTCP/IPを標準実装した初のOSである4.2BSD(UNIX)がリリースした。日本にインターネットが誕生したのは、1984年。商用インターネット接続が登場1990年にARPANETは解散し、NSFNETに継承された。1980年代末から1990年代には営利目的のインターネットサービスプロバイダー(ISP)が出現しはじめ、1995年にNSFNETはバックボーンを民間へ移管し役目を終えるとインターネット接続が完全に民営化された。これで、インターネットの営利目的の利用についての制限が無くなった。同じ1995年にマイクロソフトのWindows95が世界中でブームになる。これを機にインターネットの個人利用が普及した。インターネットの仕組みインターネットは接続するコンピュータの役割をサーバとクライアントに分けて、クライアントかサーバに「要求」を送信し、サーバがそれに「応答」を返すという処理が行われている。一つのパワフルなサーバを複数のクライアントが同時に使っている。コンピュータ同士の通信にはTCP/IPというプロトコルが使われている。プロトコルとは通信手順の約束事。プロトコルのおかげで異なるベンダの、異なるOSを搭載した様々な種類のコンピュータが接続をすることができる。サーバーとクライアントサーバとは、ネットワーク上で情報やサービスを他のコンピューターに提供するコンピューターのこと(メールサーバやWebサーバなど)。クライアントとはサーバから提供された情報やサービスを利用するコンピューターのこと(私たちが使っているPCやスマホ)。TCP/IPTCP/IP(ティーシーピー・アイピー)はコンピュータ同士が通信を行うために使われる標準化されたプロトコル群。TCPとIPだけでなくICMPやUDP、HTTPなど色んなプロトコルがあり、「IPを中心とする標準的な通信プロトコルの総称」。TCP/IPについてTCP/IPはTCPとIPだって勘違いしていたのでまとめました!TCP/IPって聞くけど何?TCP/IPは4層モデルTCP/IP(ティーシーピー・アイピー)はコンピュータ同士が通信を行うために使われる標準化されたプロトコル群。TCPとIPだlemoo3.comHTTPについてHTTPとは、HTMLで書かれた文章や画像、音声、動画などのデータをWebサーバとクライアントの間で通信するときのプロトコル。Protocol)HTTPリクエストHTTPリクエストは「リクエスト行」「メッセージヘッダー行」「メッセージボディ行」の3つの構成にわかれている。リクエスト行サーバーに送るリクエストの種類を指定する。リクエストを指定するメソッドは下図のようなものがある。<HTTPバージョン>メッセージヘッダー行リクエストに関する補足的な情報を指定する部分。<値>よく使われるフィールド名には、受理可能なメディアのフィールド名「Accept」やホスト名のフィールド「Host」、ブラウザーやクライアントプログラム情報のフィールド名「User-Agent」などがある。「情報を送る」リクエストのときに送りたい情報を格納する部分。「情報を取り出す」リクエストの時は省略される。HTTPレスポンスHTTPレスポンスは「ステータス行」「メッセージヘッダー行」「メッセージボディ行」にわかれている。ステータス行リクエストに基づいて行った処理についての結果が表示される部分。foundを表す「404」や正常に処理がされたことを表す「200」やサーバ内部エラーを表す「500」などがある。メッセージヘッダー行メッセージヘッダー行はリクエストとレスポンスの両方にありますが、フィールド名の中にはリクエストのみに使われるものやレスポンスのみに使われるもの、両方で使われるものがある。使われるフィールド名には、受理可能なメソッドのフィールド名「Allow」や生成した日時のフィールド名「Date」、サーバ情報のフィールド名「Server」などがある。HTTPのステートレス性HTTPは過去のデータを処理結果に反映させません。ステートレス性のメリットはサーバへの負担の軽減です。サーバが過去の要求を管理しないのでクライアントのリクエスト数が増えても多くのレスポンス処理を可能にします。過去の処理結果を保存しないので、同じリクエストを繰り返した場合は通信に無駄が生じるというデメリットがある。HTTPSとはHTTPはデータのやりとりをする時に「データが暗号化されていない」状態になっている。そのため、通信を傍受された時に通信内容が漏れてしまう。HTTPSは通信の安全性を高めるためにSSLと呼ばれるプロトコルでデータを暗号化している。SSLはあらかじめ決められた鍵を使って通信に暗号をかけ、その鍵を使わないと暗号が解除できない仕組みになっている。暗号化するための鍵の情報とサイトの運営者情報を記載したSSLサーバ証明書を見ることでユーザーは運営者が信頼できる相手なのかを見極めることができる。ブラウザとその仕組みブラウザとは、Webサイトを閲覧するために使うソフト(IE・Chrome・Safari・Firefoxなど)ブラウザの構成要素ユーザーインターフェイス(UI)アドレスバー、戻る・進むボタン、ブックマークメニューなどWebページ以外の部分。ブラウザエンジンUIとレンダリングの間の情報の受け渡しなどを行う。レンダリングエンジンHTMLやCSSを解析し、画面を表示する。ネットワーキングHTTPリクエストなどネットワークの呼び出しを担当する。JavaScriptインタプリタJavaScriptのコード解析と実行を担当する。UIバックエンドチェックボックスやウインドウなどのウィジェットの描画を担当する。データパーシステンスCookieなどのデータをハードディスクに保存する。WebブラウザがWebサーバにデータを要求URL(DNSサーバからIPアドレスを取得する)もとにHTTPを使用してデータを要求する。WebサーバがHTTPリクエストの窓口となって受け取り、動的な処理が必要な場合はAppサーバへリクエストを行う。Webサーバ動的な処理が必要でない場合(静的なサイト)はHTMLやCSS、JavaScript、画像などのデータを返す。動的な処理が必要な場合は、モジュールを通してプログラム(Javaやphp、Ruby)を実行したり、Appサーバにリクエストを送る。処理結果をWebブラウザに返す。Services)などがある。AppサーバWebサーバから受けたリクエストをもとにプログラム(Javaやphp、Ruby)を実行する。必要に応じて検索サーバやDBサーバにアクセスして処理を行い、結果をWebサーバに返す。検索サーバ全文検索エンジン。大量にあるドキュメントデータの中から、目的のワードを含むドキュメントデータを検索するための仕組み。DBサーバデータの保存や更新、削除、バックアップなどを行う。Appサーバからのリクエストをもとにデータの記録や書き換え、削除、データの検索などを行う。レスポンス用のデータをブラウザに返すWebサーバは必要に応じて様々なサーバと連携して処理を行い、ブラウザにHTTPレスポンスを返す。受け取ったデータを解析・表示ブラウザレンダリングネットワーキングから開くページのドキュメントを受け取ったら、レンダリングエンジンの仕事が始まる。1HTMLドキュメントの解析を行い、HTMLドキュメントをDOMツリーに変換する。DOMツリーには全てのDOMが格納されている。2CSSも解析を行い、CSSの構造体を生成する。3DomツリーとCSSOMから画面表示に必要なRenderツリーを構築する。RenderツリーにはDOMの構造と装飾の情報の両方が含まれ、全てのDOMは格納せず表示するDOM要素のみが格納される。4Renderツリーが持つ各DOM要素の位置決定をしレイアウトする。5ペイントでは画面の描画処理を行い、その結果、画面が表示される。IPアドレスは覚えにくく、人間には扱いにくい。rails1vue.js3wordpress1レクチャー5全て10基礎知識7日記1アーカイブ2021年10月32021年9月72020年8月32020年7月22020年4月42020年2月102019年11月3Lemoowebデザイナー。HTML、CSS、Javascriptを独学しwebデザイナーとして就職。フロントエンジニアになるべくLaravel+Vueを独学中。勉強しているつもりになっていても中々知識は定着しない。そこで、学んだことを記録していこうと思いブログを開設しました。_lemoo_Lemoowebデザイナー。HTML、CSS、Javascriptを独学しwebデザイナーとして就職。勉強しているつもりになっていても中々知識は定着しない。そこで、学んだことや作ったものを記録していこうと思いブログを開設しました。趣味は絵を描くこと、手芸、散歩。rails1vue.js3wordpress1レクチャー5全て10基礎知識7日記1アーカイブ2021年10月32021年9月72020年8月32020年7月22020年4月42020年2月102019年11月3タイトルとURLをコピーしました。