2.ブラウザのレンダリング方法について

4534 ワード
テキストリンク

ブラウザレンダーパス


この文章は意外にも新人は知らなかった!ブラウザレンダーパスを理解するために書かれたものです.
作者本当にありがとう

1.ブラウザアドレスウィンドウに特定のアドレスを入力する



「ブラウザ・アドレス」ウィンドウに、上記の特定のアドレスを入力します.

2.このアドレスのサーバーにアクセスします。DNSは、実際のサーバが存在する場所に接続されます。このときhttp,httpsの各条件を満たすように通信する.


DNS (Domain Name System)

  • ドメインをIPアドレスに変換します.
    ex) www.amazon.com <-> 192.0.2.44
  • の電話帳の役割を果たす.(ドメインもIPアドレスも知っています)

    • HTTP/HTTPS


    HTTP (Hyper Text Transfer Protocol)

  • サーバ/クライアントモードデータ交換プロトコル

    • HTTPS (Hyper Text Transfer Protocol Secure)

  • httpにデータ暗号化を追加するプロトコル

    • 3.サーバのプリファレンスはindexです。htmlなので、サーバー(アマゾンサーバー)からクライアント(ブラウザ)にファイルを送信します。


    index.html

  • インデックスファイルは、ディレクトリ内の代表文書
    • である.
  • ブラウザからディレクトリに接続すると、自動的に表示されるファイル
    • が表示される.
  • インデックスファイルがない場合は、ディレクトリ内のファイルをリスト形式で表示するか、禁止情報が表示された場合は
    • へのアクセスを禁止する.

    4. index.htmlを受信するブラウザでテキストからなるインデックス。htmlファイルを分割しながらDOMツリーを作成します。


    グループ化

  • プログラミング言語で作成されたファイルを実行して構文解析を行う手順

    • ドキュメントオブジェクトモデル:ドキュメントオブジェクトモデル

  • ブラウザがhtmlファイルを読み出すと、ブラウザは、メモリに格納可能なオブジェクト
    • に理解して変換することができる.
  • オブジェクトに変換してTree構造を生成します.これをDOMといいます.

    • DOM

  • DOMは、我々が定義した要素からなるツリー構造であり、JSを使用してウェブページ
    • を整理することができる.

    5.htmlを読むときにlinktagに遭遇し、cssリクエストが発生した場合、リクエストと応答プロセスによってcssをグループ化する

    <link rel="stylesheet" href="abc.css" />

    6.cssセグメント終了後、一時停止したhtmlを再読み込みし、DOM treeを完了する


    7.完了したDOMツリーとCSSOMツリーを結合してRender Treeを生成します。


    CSSオブジェクトモデル：CSSオブジェクトモデル

  • ブラウザはhtmlをDOMとして作成し、開発者定義のCSSとデフォルト設定のCSSをカスケードルールに従ってCSOMにマージします.
    (カスケード・ルール:スタイルシート・ルールをカスケードします.htmlの外観と実行方法をブラウザで示します.)

    • Render Tree

  • ブラウザがhtmlファイルを読み込むときは、まずDOMツリーを作成し、次にCSSファイルを読み込み、次に最終的に決定されたCSSスタイルツリーを作成します.
  • 以降は、ブラウザに表示されている要素のみがRender Treeでフィルタされます.
  • 不透明度:0;visiblity : hidden; これらの値が存在する場合、Render Treeにはこれらの値が含まれます.これは、ユーザーの目には見えませんが、要素が全くないわけではありません.
    -> Render Tree = DOM Tree + CSSOM Tree
  • Render Treeをすばやく作成する方法
  • DOM要素とCSS規則が少ないほど速い.
  • htmlは、divタグおよび冗長パッケージの乱用など、不要なタグ
    • の使用を禁止する.
  • cssの場合、boxを移動する際にtop、leftなどの属性を使用してレイアウトから再生成し、translateを使用して
    • のみ生成する.

    8.html解析器は、配布時にscript tagに遭遇し、jsコードを実行するために配布を停止する。

    <script src="javascript.js"></script>

    9.JSエンジンに制御権限を渡し、ロード時にJSコードまたはファイルをグループ化して実行する


    リファレンス

  • ブラウザレンダーパス(ブロック→レンダリング→レイアウト→塗りつぶし)
  • index.htmlファイルを作成する役割と簡単なhtml Webドキュメント
  • Webサイトのインデックス。htmlページの理解
  • DNS
  • [Web]HTTPとHTTPSの概念と違い
    • stsテストプロセス
    テストフレームワークMocha