URLからページまで何を経験したのか(詳細版)

5270 ワード
httml 5 html javascript
URLからページまで何を経験したのか
  • 本文は主に
    • をまとめた.
  • ピクチャは、ネットワーク
    • に由来する
  • 不足点、伝言を残して
    • を補充してください
    1.ビューアキャッシュ
    2.ブラウザ解析URL取得プロトコル、ホスト、ポート、path
  • URLは何ですか?
    scheme://host.domain:port/path/filename?
  • scheme:プロトコルで、http、https、ftp、file
    • が一般的です.
  • domain:ドメイン名、ドメイン名を通じてサーバーIP
    • を操作する
  • port:ポート番号
  • path:パス
  • filename:定義ドキュメント/リソースの名前
  • ?:後続クエリパラメータ等

    • 3.DNS解析
  • は、ブラウザがドメイン名で対応するサーバを直接見つけるのではなく、IPアドレスを通過するため、ドメイン名解析である.ドメイン名からIPを見つけるプロセスはDNS解析
    • である.
  • 遊覧機が最初に検索した自身のDNSキャッシュ
  • 遊覧器はDNS解析のIPとドメイン名をキャッシュし、ネットワーク要求の損失を減らす.
  • 各遊覧機のキャッシュ時間は異なり、chromeは60 s、IEは30 min、Firefoxは60 s
    • である.
  • ビューアがない場合、オペレーティングシステム内のDNSキャッシュ
    • を検索する.
  • がない場合は、オペレーティングシステムのhostsファイル
    • を検索する.
  • ルーティングキャッシュ:ルータにもDNSキャッシュがあります.
  • ISPのDNSサーバ:ISPはインターネットサービスプロバイダ(Internet Service Provider)の略称であり、ISPにはDNSクエリー要求
    • に対応する専用のDNSサーバがある.
  • 本サーバ:ISPのDNSサーバがまだ見つからない場合は、ルートサーバに要求して再帰クエリを行う(DNSサーバはルートドメイン名サーバ.comドメイン名サーバのIPアドレスを先に聞いてから.baiduドメイン名サーバに聞いて、順次類推)
    • .
  • 追加説明:DNS prefetch(エクスプローラDNS事前解析)
  • ブラウザが定義したルールに従って、後に使用する可能性のあるドメイン名を事前に解析し、解析結果をシステムキャッシュにキャッシュし、DNS解析時間を短縮し、ウェブサイトのアクセス速度を向上させる.
  • 現代ブラウザはDNS Prefetchで2つの仕事をしました:
  • htmlソースコードのダウンロードが完了すると、ページのリンクを含むラベルが解析され、対応するドメイン名
    • が事前にクエリーされます.
  • アクセスしたページに対して、ブラウザはドメイン名のリストを記録し、再び開くとhtmlダウンロードと同時にDNS
    • を解析する.
  • は2種類に分けられる:自動解析:
              href             。   a  ，       href       IP  ，                   。         ， HTTPS
    手動解析:
    
    link
    
        
     HTTPS           
    
        
     HTTP

    • 4.socketとターゲットIPアドレスを開き、ポートはTCPリンクを確立する(三回握手)
  • 『コンピュータネットワーク』には、3回の握手の目的は「失効した接続要求メッセージが突然サービス側に伝達されることを防止するために、エラーが発生する」
    • と記載されている.
    SYN：synchronous    

ACK：acknowledgement   

1.      ：       SYN=1，seq=x（x        ）    ，             ，           

2.      ：         SYN=1，seq=y，ACK=x+1。                       ，         seq  1，            。

3.      ：             ACK=y+1，                。
    5.HTTPリクエストメッセージの送信開始
        ：   （      ）

POST /examples/default.jsp HTTP/1.1

/*
 * POST（Method     ）
 * /examples/default.jsp（URI：Uniform Resource Identifier        ）
 * HTTP（Protocol   ）/1.1（Version   ）
 */


    ：   （Request headers）

Accept: text/plain; text/html 

            ，    /    ，    ，          “:”  


    ：    ：   （Entity body）

lastName=Franks&firstName=Michael
    6.サーバが要求を処理してHTTPメッセージを返す
    6.1サーバ
    サーバは、ネットワーク上の他のコンピュータ(クライアント)が送信するサービス要求をリスニングし、対応するサービスを提供するネットワーク環境における高性能コンピュータである.
    6.2 MVCバックグラウンド処理段階
    6.3 http応答メッセージ
        ：   

HTTP/1.1 200 OK

/*
 * HTTP（Protocol   ）/1.1（Version   ）
 * 200（Status code）
 * OK（Description）
 */

    ：   

Server: Microsoft-IIS/4.0  
Date: Mon, 5 Jan 2004 13:13:33 GMT  
Content-Type: text/html  
Last-Modified: Mon, 5 Jan 2004 13:13:12 GMT  
Content-Length: 112
....

    ：   


     
    
        ....
    7.ブラウザ解析レンダリングページ
    7.1 HTMLによるDOMツリーの解析
    HTMLの内容に基づいてラベルを構造解析してDOMツリーとし,DOMツリー解析の過程は深さ優先遍歴である.つまり、現在のノードのすべてのサブノードを構築してから、次の兄弟ノードを構築します.HTMLドキュメントを読み取り、DOMツリーを構築する過程でscriptラベルに遭遇すると、スクリプトの実行が完了するまでDOMツリーの構築は一時停止します.
    7.2 CSS解析によるCSSルールツリーの生成
    CSSルールツリーを解析すると、js実行はCSSルールツリーが準備完了するまで一時停止します.ブラウザはCSSルールツリーが生成されるまでレンダリングされません.
    7.3 DOMツリーとCSSルールツリーを組み合わせてレンダリングツリーを生成する
  • DOMツリーとcssツリーは並列に解析され、両方がすべて完了するとレンダリングツリー
    • が生成されます.
    DOMツリーとCSSルールツリーがすべて用意されている場合、ブラウザはレンダリングツリーの構築を開始します.CSSを簡素化し、CSSルールツリーの構築を高速化し、ページの速度を速めることができます.
    7.4レンダーツリーから各ノードの情報(レイアウト)を計算する
    ≪レイアウト｜Layout｜oraolap≫:レンダー・ツリーでレンダーされたオブジェクトの情報を使用して、各レンダーされたオブジェクトの位置とサイズの還流を計算します.レイアウトが完了すると、ある部分が変化してレイアウトに影響を及ぼしていることがわかりました.それでは、逆戻りして再レンダーする必要があります.
    7.5計算した情報に基づいてページを描く
    ペイントフェーズでは、レンダリングツリーを巡回し、ディスプレイの「paint」メソッドを呼び出して、ディスプレイの内容を画面に表示します.再描画:ある要素の背景色、文字色など、要素の周囲や内部レイアウトの属性に影響を与えず、ブラウザの再描画のみを引き起こします.リフロー:エレメントのサイズが変更された場合は、レンダーツリーを再計算してレンダーします.
    8.接続解除(手を4回振る)
  • 受信完了後リンクを切断
    • 1)クライアントプロセスは接続解放メッセージを発行し、データの送信を停止する.データメッセージヘッダ、FIN=1を解放し、シーケンス番号がseq=u(前に転送されたデータの最後のバイトのシーケンス番号に1を加算)である場合、クライアントはFIN-WAIT-1(終了待ち1)状態となる.TCPでは,FINメッセージセグメントはデータを持たなくても1つのシーケンス番号を消費することを規定している.
    2)サーバは接続解放メッセージを受け取り,ACK=1,ack=u+1の確認メッセージを発行し,独自のシリアル番号seq=vを持つと,サービス側はCLOSE-WAIT(クローズ待ち)状態となる.TCPサーバは上位層のアプリケーションプロセスを通知し、クライアントがサーバの方向に解放されると、クライアントはすでに送信するデータがないが、サーバがデータを送信すると、クライアントは依然として受け入れなければならない.この状態がしばらく続く、つまりCLOSE-WAIT状態全体が続く時間です.
    3)クライアントがサーバの確認要求を受信すると,その時点でクライアントはFIN−WAIT−2(終了待ち2)状態となり,サーバが接続解放メッセージを送信するのを待つ(その前にサーバが送信した最後のデータを受信する必要がある).
    4)サーバは最後のデータを送信した後,接続解放メッセージをクライアントに送信し,FIN=1,ack=u+1としたが,半閉状態であるため,サーバはまたいくつかのデータを送信する可能性が高く,このときのシーケンス番号がseq=wであると仮定すると,サーバはLAST-ACK(最終確認)状態に入り,クライアントの確認を待つ.
    5)クライアントは,サーバの接続解放メッセージを受信した後,ACK=1,ack=w+1,自分のシリアル番号がseq=u+1であることを確認しなければならず,このときクライアントはTIME-WAIT(時間待ち)状態に入る.なお、このときTCP接続はまだ解放されておらず、2∗MSL(最長メッセージ期間寿命)の時間が経過した後、クライアントが対応するTCBを取り消した後、CLOSED状態に入る必要がある.
    6)サーバはクライアントからの確認を受けると,直ちにCLOSED状態に入る.同様にTCBを取り消すと,今回のTCP接続は終了する.サーバがTCP接続を終了する時間はクライアントよりも早いことがわかります.
    参照
    https://mp.weixin.qq.com/s/Ln...
    http://blog.poetries.top/FE-I...
    checkboxがバックグラウンドに複数のname同じvalueを送信する場合の2つの属性駆動受信方式
    STM 32 F 072の8 Mでのソフトウェア遅延