ブラウザの動作

3349 ワード
ネットワーク ガイドコース NAVER フルスタック テキストリンク

エクスプローラ

  • ブラウザは、グローバルインターネット上で情報を検索、表現、および閲覧するためのソフトウェアである.
  • ネットワークから特定の情報に移動できるアドレス入力ウィンドウがあり、サーバとHTTPで情報交換が可能なネットワークモジュールも含まれています.
  • サーバから受信したドキュメント(HTML、CSS、JS)を解釈して実行し、画面に表示する解析器があります.
    • 各
  • ブラウザには、異なるエンジンが含まれています.

    • ブラウザコンポーネント



    1.ユーザーインタフェース:アドレス、後退、前進、ブックマークなどの要求ページを表示するウィンドウのほか、ブラウザのすべての部分が表示されます.

    2.Browser Engine:ブラウザソフトウェアを実行するコアエンジンです.ブラウザはデータの一部をキャッシュおよび格納します.これらのデータを管理する分野です.
    3.RenderingEngine:要求内容の表示を担当します.要求されたコンテンツがHTMLの場合、HTMLとCSSの構文解析を行い、解析したコンテンツを画面に表示します.
    4.ネットワーク:クライアントとサーバ間のHTTP通信を可能にする.
    5.UI Backend:UI領域のバックエンド領域.
    6.JavaScript Interpreter:JSコードの解析と実行に使用します.

    Safariブラウザでのレンダリングエンジンの処理手順


  • HTML Parser解析HTMLはDOM Treeを生成し、CSS Parser解析CSSはCSS Treeを生成する.
  • の2本の木が相互に関連し、Render Treeに結合されています.組み合わせの結果には,画面にどのように配置されるかの大きさや位置情報などが含まれている.
    • Render Treeに含まれる情報に従って、
  • 画面のどの部分にどのように着色し、その後に色を塗るか.

    • DOM/CSS Tree


    DOM Tree

    <html> 
  <body> 
    <p> 
      Hello World 
    </p> 
    <div> 
      <img src = "example.png" />
    </div> 
  </body> 
</html>
  • がhtmlをDOMツリーに変換すると、以下のようになります.

    • CSS Tree



    これは
  • cssツリーに変換した結果です.

    • 考える

  • ブラウザをブラウズするときにスクロールしたり、ボタンをクリックして画面の位置を変更したりすると、ブラウザはどのように画面を再描画しますか?
  • が保存されているレンダーツリーからペイントが開始されます.
    • 上に表示されているように再レンダリングされますか?
  • 画面位置を変更する操作がJSと同じ場所に格納されている場合は、再レンダリング操作は行われません.
    • NSObjectのいくつかの比較的によく使われる方法と簡単な反射
    210901