知っている白いシニアフロントエンドのニーズに正面からスキル概要（2）

このシリーズの第二の記事では、要約し続けて~~

これは、知識の問題から派生し、問題がある
ページをロードするプロセスへの入力からURL。
このプロセスのうち第一で並び替え

第一歩

ブラウザからURLは、ネットワーク・スレッドを開くための要求を受信する（ブラウザプロセス/スレッドモデル、JSの操作機構）

ブラウザのプロセス

これは、マルチプロセスブラウザです。そこ主要なプロセスがあり、各タブは、（空白、タブなどのいくつかの例（）内の複数のタブプロセスにマージします）新しいページ・プロセスを開きます
プロセスがメインコース、プラグインプロセス、GPU、タブページ、およびその上を含むことができます。

• ブラウワープロセス

コーディネート、マスターなどを担当するメインプロセス

• サードパーティ製のプラグインプロセス

プラグインの各タイプは、プラグインが作成された場合にのみ、プロセスが存在するであろう。

• GPUプロセス

3Dレンダリングのための唯一の1、

• デフォルトのブラウザのプロセス（カーネル）

ページのレンダリング、スクリプトの実行を担当するプロセスの各タブページの対応は、互いに独立して、時々の最適化（複数の空白タブを1つにマージされます）

ブラウザのマルチスレッドカーネル

各タブページがブラウザカーネルプロセスと見なすことができ、プロセスがマルチスレッドで、それは次の主要なスレッドがあります。

• GUIのレンダリングスレッド
• （JSは常に理由は、シングルスレッドと言われている理由である）JavaScriptのスレッド
• イベントトリガーのスレッド
• タイマ・トリガ・スレッド
• ネットワーク要求スレッド

HTTPリクエストのURL解決さ、それはリソースのダウンロードを処理する新しいスレッドを開く場合は、各ネットワーク要求は、別のスレッドを開く必要があります。（Http2.0接続多重化は、TCPを実現することができます）

JS操作機構

私の他の記事を参照してください
jsのイベントループの実装メカニズム

第二のステップ

完全なスレッドのHTTPリクエスト（DNSクエリ、TCP知識/ IP要求、5つのインターネット・プロトコル・スタックなど）を発行するオープンネットワーク

DNSルックIP

あなたがドメイン名を入力すると、以下のように、DNS解決は、IPを必要とします。

• ブラウザがキャッシュされている場合は、直接ブラウザのキャッシュを使用し、そうでない場合は、ローカルキャッシュを使用します
• ローカルキャッシュ、使用のホストが存在しない場合は、DNSサーバへの問い合わせはもはやIPを（キャッシュがあるルートの途中には、ルーティングキャッシュなどを使用することができます）

DNSクエリは非常に時間がかかり、あまりにもドメイン名を解決する場合は、最初の画面をロードするために遅くなり、あなたが使用し、DNSプリフェッチを最適化することができます

TCP / IPのリクエスト

本質は、http TCP / IP要求である
4は、3ウェイハンドシェイクで手を振ってと切り離さ理解する必要のこの部分を。

スリーウェイハンドシェイク

HTTP、TCP 3ウェイハンドシェイクを介したショートメッセージに長いメッセージは、データの伝送のための接続を確立します。

1. クライアント：こんにちは、私はクライアント、あなたが正しいサーバーです
2. サーバー：こんにちは、私は、サーバー午前、あなたはクライアントあなたがいます
3. クライアント：はい、私はクライアントです

接続が成功したら、あなたはデータにそれを送信し始めることができます~~

手を振っ四

1. アクティブ側：こんにちは、私はそれを切断したい、私は受動的にデータを受け取ることができます
2. パッシブ側：こんにちは、私はそれを受け取りました
3. パッシブ側：こんにちは、私はそれを切断しなければなりません
4. アクティブ側：まあ、私は受動的にもオフデータを受信する接続します。

これは、通信できない切断された後。

TCP / IPの同時実行の制限

同じドメイン名の下のTCP同時ブラウザ接続は、（2-10の範囲）制限され、http2.0前に、リソースは、あなたは、TCP / IP要求をダウンロードする必要があります。

違いは取得/のポストを

GETとPOSTの性質は、TCP / IPですが、TCP / IPも差別化レベルでのhttpレベルに加えて、唯一の（ヘッダとデータが送信一緒に）データパケットを生成しますが、この2件のPOSTリクエストが送信されパケット（初回送信後ヘッダー、100は再送データを受信することになります）

五層のインターネットプロトコルスタック

クライアントから受信したサーバーに送信された要求HTTP、中間がされ、単純な一般化の一連流れます：
アプリケーション層からのHTTPリクエストを送信し、トランスポート層は、3ウェイハンドシェイクのTCP / IP接続し、ネットワーク層アドレス、IPによって形成され、その後、さ物理的な伝送媒体を使用して、最終的に物理層にパッケージのデータリンク層フレーミング。
OSIのフルフレームもあり、マルチセッション、プレゼンテーション層
、セッション層：異なるユーザおよびプロセス間の対話を管理し、そのようなログインおよびログアウト制御などの
情報交換を表すために2つの通信システムの処理、データフォーマットの交換、データの暗号化および復号化、データの圧縮などを含む：プレゼンテーション層。

第三段階

対応する要求バック受信（ロードバランシング、インターセプトを安全背景内部処理）サーバから受信した要求

ロードバランシング

大規模なプロジェクトの場合は、同時アクセスの量は素晴らしいですが、この場合、次のサーバはそれほど一般的でリバースプロキシの負荷分散と、クラスタ内のサーバの数があるでしょう、間違いなく十分ではありません。
ユーザー開始要求がスケジューリングサーバ、スケジューリング・サーバと実際のスケジューリングアルゴリズム、クラスタの実行に対応するサーバに異なる割当要求を向けられ、スケジューラは、実際に応答してHTTPサーバを待ち、その後、ブラウザに返さ

セキュリティインターセプター

背景には、通常、インターセプタを追加し、セキュリティインターセプタは、などのクロスドメイン認証を検証しました

第四段階

1. インタラクティブ前景と背景（HTTPヘッダー応答コード、メッセージ構造、クッキーなど、gzip圧縮、等）

HTTPヘッド

このセクションでは、3つの部分を含みます

ユニバーサルヘッド

サーバーのアドレス要求：要求のURL

要求方法：モード要求（GET、POST、HEAD、OPTIONS、PUT、DELETE、CONNECT、TRACE）
（HTTP1.0定義3つのリクエストメソッド、GET、POST、HEAD、HTTP1.1は5つのメソッドオプションを追加、PUT、DELETE、CONNECT、TRACE ）

ステータスコード：要求はステータスコードを返します。

リモートアドレス：リモートサーバ要求のアドレス（IPに変わります）

リクエストヘッダ

受け入れ：タイプを受信し、発現ブラウザがMIMEタイプサポート（（多目的インターネットメール拡張）は、メッセージコンテンツのインターネット標準のタイプの記述がある）、対応するサーバは、コンテンツタイプを返さ

受け入れ-encodingを：などのgzipなどのブラウザがサポートする圧縮形式を

内容に発行されたブラウザのエンティティのタイプ：コンテンツタイプ

Cache-Control：指定要求と、このようなキャッシュなしとして、キャッシュ機構を返します

修正-IF-以降：キャッシュは1秒内にのみ正確であるかどうか、変更がファイルと一致するかどうか、のLast-Modifiedのサービス側に対応し、それはHTTP1.0であります

有効期限：この時点ではキャッシュを使用して、HTTP1.0

マックス・年齢：ローカル・キャッシュ・リソースの秒数、有効時間内のキャッシュの使用を表しています

場合 - なし - マッチ：のEtag対応するサービスが終了すると、ドキュメントの内容が変更された一致します

クッキー：クッキーと同じドメインにアクセスするための時間がかかります

接続：サーバとクライアントの通信接続、キープアライブ、接続長さ指示（データ（RSTパケットがなされていない、ではない四波）は、完全なTCP接続が維持されていない転送、クライアントがない無期限にすることができ、長い接続問題は、サーバーが4倍TCP接続をオフに手を振って開始することができるしません、クライアントがTCP接続を知ることができ、サーバがクライアントのタイムアウトを教えてくれていない場合、サーバーは、ときどきタイムアウトをクライアントを教えてくれます、タイムアウトがあるでしょう、それを取りますこれは、無効となっている。加えて、TCPハートビートパケットは、現在の接続がまだ生きているかどうかを検出することがあります）

ホスト：要求されたサーバのURL

原産地：最初の要求が開始された場合、それが唯一のポートに正確になります

リファラー：ページのソースは、CSRFは、このフィールドを傍受するために使用され、ページのアドレスに正確になります

User-Agent：クライアントのユーザに関する情報は、そのようなブラウザ情報など

レスポンスヘッダ

アクセス制御 - 許可 - ヘッダ：ヘッダはサーバー要求を許可します

アクセス制御 - 許可-方法：メソッドサーバは要求を許可

アクセス制御 - 許可 - 起源：オリジンサーバがリクエストを許可します

コンテンツタイプ：サーバエンティティによって返されたコンテンツの種類

日時：データはサーバー時間から発信します

キャッシュ制御：クライアントのキャッシュ機構に指示します

最終更新：リクエスト最後の変更されたリソース

有効期限：この時点ではキャッシュを使用してクライアントに伝えます

最高年齢：何秒ローカルキャッシュにクライアントに伝えます

たEtag：リソースは、リソース変更するかどうかを示す要求識別

Set-Cookie：クライアントへのクッキーの頭部によって、サーバに関連付けられているクッキーの設定とページ

キープアライブ：クライアントがキープアライブを提供する場合は、対応する応答サーバがあるだろう、など= 20タイムアウトとして

サーバー：サーバー情報。Apacheなど

レスポンスコード

の異なる範囲の状態を意味

• 1XX ---要求が受信された、処理は続行します
• 2XX ---要求は、受け入れ理解されています
• 3XX ---リダイレクション、操作を完了にはさらに処理が必要です
• 4XX ---クライアントエラー（パラメータエラー、構文エラーや要求を達成することはできません）
• 5xxの---サーバーエラー

一般的なステータスコード

• 200 ---要求を受信し、正常にクライアントに返されました
• 302 ---リダイレクト
• 304 ---ブラウザのキャッシュを持ちます
• 400 ---クライアントの要求が間違っている、間違ったリクエストパラメータなど
• 401 ---何の権限を要求しません
• 403 ---アクセスを禁止する（禁止がログインしていないなど）
• 404 ---リソースが見つかりません。
• --- 500内部サーバーエラー
• --- 503サービスを使用できません

クッキー

クッキーは、道のブラウザのローカルストレージで、一般的なヘルプクライアントとサーバーの通信、身元を確認するために、サーバー側のセッションの使用と組み合わせます。

単に使用シナリオの下に置きます：

1. ユーザーログイン
2. 情報サーバは、リクエストを受信したセッションを生成し、ユーザが存在します
3. セッションIDを生成します
4. サーバー側のクッキーは、ログインページに書かれています
5. ブラウザがこのクッキーを持っており、同じドメイン名へのアクセスは自動的にこのクッキーは時間がかかります

GZIP

高効率のgzip圧縮は、70％まで、具体的に別の物品のIを参照GZIPの最適化フロントエンドのパフォーマンス

第五の工程

1. キャッシュ関連の問題（HTTPキャッシュ、キャッシュ頭、ETagを、キャッシュ制御など）

キャッシュのこの部分は、私の他の記事を参照することができ
、ブラウザのキャッシュメカニズムを解析し、

1. プロセスブラウザを解析するHTTPパケット（解析HTMLを受け取り、字句解析DOMは、外側、レンダリング、合成複合層、GPUレンダリングの描画、レンダリングツリーおよびレイアウトに合わせたツリー、CSSの解析ツリー生成CSSルール、に解析しました処理、domcontentloadedチェーンのリソースをロードなど）

複合層、合成層、GPUハードウェアアクセラレーションは、こちらの記事を参照してくださいます。https：//juejin.im/entry/59dc9 ...

1. CSS視覚モデル（例えば制御ブロックを含むブロックとして、ルール要素をレンダリングする、BFC、IFCの概念）

BFCは、このセクションのメモを参照することができます
BFC

1. JSエンジン解析処理（JS解釈ステージ、予備処理ステージ、実行ステージ、コンテキストを生成し、VO、スコープチェーン、回収機構）

JS執行機構部は、こちらの記事を参照することが
jsの実施メカニズム

一般的に、知識点は以下の通りである~~

コア知識

ブラウザのモデル

プロセスエクスプローラとスレッド

レンダリング原則

ドムは、木、リフロー、再描画、および簡単な層の複合層、GPUレンダリングをレンダリングツリー、CSSツリーを構築しました

JS解決プロセス

バイト - >単語 - >構文木 - >マシンコードにパース

JS操作機構

可変リフト、リフト機能、VO、AO、この

主要な知識

HTTP関連

HTTP1.1 http2.0 HTTP1.0、HTTPS
http2.0主な新機能

1. 多重（TCP / IP接続が複数のリソースを要求することができます）
2. ヘッダ圧縮（HTTPヘッダ圧縮、体積を減少させます）
3. バイナリフレーミング（多層バイナリフレーミング層のアプリケーション層およびトランスポート層、伝送性能、低レイテンシ及び高スループットを向上させます）
4. プッシュサーバ（要求元のクライアントのためにサーバが複数の応答を発行することができ、積極的にクライアントに通知することができます）

HTTP、HTTPS、SSL接続を確立する前に要求に基づいて構築されていますが、必ず次の通信が暗号化されていることを確認し、盗まれたことができません。

ここでは単にSSL / TLSハンドシェイクプロセスの下で：

1. SSL接続を確立するために、ブラウザのリクエストや、RSAの暗号化など、ランダムな暗号化クライアント乱数とクライアント側のサポートサービスを送り、これは明確に送信されました
2. ウェブサイトのアドレスを含む証明書の形式（非対称暗号公開鍵認証局にブラウザに暗号化アルゴリズムとハッシュアルゴリズム、ランダムな乱数サーバへの応答、および自分自身のアイデンティティ情報のセットを選択するサーバーなど）

3. ブラウザが発行したサーバ証明書を受け取った後

   • 合法性検証証明書は、信頼証明書ならば、ブラウザは小さなロックアイコンの前に表示されます（権限は同じURLと場所をURLで証明書がいるかどうか、正当なものです）
   • ユーザーの資格情報を受け取る（それを信じるか、あらゆる事柄に）した後、ブラウザが新しい乱数プレマスター・キーを生成し、公開鍵証明書と指定した暗号化方式で暗号化プレマスター・キー、サーバに送信されます

• 特定のアルゴリズムによってランダムなクライアント、サーバランダム、およびプリマスター・キーを使用すると、対称暗号化セッションキー伝送接続のhttpを発生させることができます
• 良い合意ハンドシェイクメッセージのハッシュアルゴリズムを使用し、発生前のサーバに生成したセッションキー、および送信を使用して、すべての情報を暗号化

1. サーバーは、ブラウザの応答を受信します

• アクセスプレマスターキー、クライアントから送信された情報を復号化するために知られている方法と、自身の秘密鍵を使って暗号化と復号化
• そして、同じブラウザは、セッションキーのルールを生成し、
• 使用ブラウザセッションキーは、ハンドシェイクによって送信された情報を解読し、ブラウザから送られたハッシュと一致するか否かを検証します
• ブラウザに送信されたハンドシェイク情報の使用セッション鍵暗号期間

1. サーバは、ハッシュへのハンドシェイクのと同じ、終了を送信した場合、ブラウザは、サーバーのハンドシェイクにより送信されたハッシュを復号化します。

Webセキュリティ関連（XSS、CSRF）

クロスサイトスクリプティング攻撃XSS
のクロスサイトリクエストフォージェリCSRF

クロスドメインおよび治療

~~このシリーズの前回の記事を参照して、クロスドメイン処理
白シニアフロントエンドのニーズに正面からスキルの概要は、（1）を知っています