Webブラウザはどのように動作しますか?

5903 ワード
CS テキストリンク

ブラウザとは?


Webブラウザはhtml、css、javascript言語を同期解析して画面にコンテンツを表示するアプリケーションです.
동기적 : 위에서 아래도 순서대로 실행이 되는 것을 동기적 처리라고한다. 즉, 지금 작업이 끝나면 다음 작업으로 넘어가고 그 작업이 끝나면 또 다음 작업으로 넘어가는 것을 동기적 처리 방식이라고 한다.

ブラウザの構造



  • ≪ユーザー・インタフェース｜User Interface｜ldap≫:ユーザーがアクセスできる領域.終了ボタン、アドレスウィンドウ、後退ボタンなどのユーザは、ウィンドウの領域を制御することができる.

  • ブラウザエンジン:ユーザーインタフェースとレンダリングエンジンの動作を制御します.データストレージを使用して、ローカルでデータを書き込み、読み取ります.

  • レンダリングエンジン:Webサーバから受信したリソースをWebブラウザに表示します.たとえば、HTMLドキュメントを受信すると、HTMLとCSSのブロックが画面に表示されます.
    WebサーバからHTMLドキュメントを受信すると、レンダリングエンジンのHTML、CSS解析器でグループ化され、DOM、CSSOMツリーに変換されてレンダリングツリーにマージされます.ここで生成されたレンダリングツリーに基づいてWebページが表示されます.
    *파싱 : 파싱은 어떤 페이지(문서, html 등)에서 내가 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것을 말한다.

  • 通信:HTTPリクエスト等のサーバと通信するためのネットワークコール.

  • UIバックエンド:select、inputなどの基本部品を描画するためのインタフェース.

  • JavaScriptインタプリタ:JavaScriptコードの解釈と実行.

  • データストレージ:Cookie、Local Storage、Indexed DBなどのブラウザメモリを利用して格納する領域.

    • レンダーエンジン(Render Engine)


    ブラウザごとにレンダリングエンジンが異なるため、同じページが異なる場合があります.
    そのため、以下のようにCSSコードにBender Prefixを使用する必要がある場合がある.
    -moz-border-radius: 1em; // 파이어폭스 브라우저에 적용
-ms-border-radius: 2em; // 익스플로어에 적용, 보통 생략
-o-border-radius: 3em; // 오페라에 적용
-webkit-border-radius: 4em; // 구글, 사파리 브라우저에 적용
  • ブラウザ固有のベンダーPrefix 
    • IE or Edge → -ms-

Chrome → -moz-

Firefox → -webkit-

Opera → -o-

iOS Safari → -webkit-

Android Browser → -webkit-

Chrome for Android → -webkit-
  • ブラウザ固有のレンダリングエンジン
    • Blink - 크롬, 오페라

Webkit - 사파리

Trident - 익스플로어

EdgeHTML - 마이크로소프트 엣지

    レンダーエンジンモーションパス(Render Engine Motion Passes)



  • htmlドキュメントをグループ化してdomツリーを構築する
    <html>
	<body>
		<p>coding airport</p>
		<div><img src="test.png" /></div>
	</body>
</html>
    上のコードは、次のDOMツリーに変換できます.

    DOMと寸法は1:1の関係を確立する.

  • CSSドキュメントをスライスしてCSSOMツリーを作成する

    CSSファイルはスタイルシートオブジェクトとしてグループ化され、各オブジェクトにはCSSルールが含まれます.CSSOMには、選択者、宣言オブジェクト、およびCSS構文に一致する他のオブジェクトが含まれます.

  • レンダーツリー(DOM+CSSOM)を生成します.
    DOMツリーを構築するとき、ブラウザはDOMツリーに基づいてレンダリングツリーを生成します.レンダリングツリーは、ドキュメントをビジュアルコンポーネントにする役割を果たします.
    レンダラーはDOM要素に一致しますが、1:1の関係ではありません.理由は.  <head> ,  display:'none'などのユーザが見えないDOM要素は、レンダリングツリーに追加されません.(可視性プロパティ「hidden」値に割り当てられた要素がツリーに表示されます.)


  • レンダーツリーを配置します.
    レンダーツリーには位置とサイズがないため、各オブジェクトの位置とサイズを決定します.◇レンダリングツリーでは、画面に表示するノードとそのノードに定義されたスタイルが計算されていますが、実際の画面上のどの位置がどのようなサイズで表示されるかは不明です.したがって、ルートディレクトリからレンダーツリーをブラウズし、実際のアプライアンス画面のサイズに応じて相対サイズを絶対サイズのピクセルに変換します.

  • レンダリングツリーを描画します.
    レンダーツリーを作成してレイアウトを設定すると、UIバックエンドが起動し、レンダーツリー内の各オブジェクトが画面上のピクセル(px)値として表示されます.

    • JavaScriptの処理


    javascript javascriptエンジンで処理します.HTML解析器  <script>  タグに遭遇すると、DOMの生成プロセスが停止してJavaScriptコードが実行され、JavaScriptエンジンに権限が渡されます.制御権限が付与されたJavaScriptエンジン  <script>  ラベルのJavascriptコードまたは  src  実行プロパティで定義したJavascriptファイルをロードしてスライスします.Javascriptの実行が完了したら、再びHTML解析器に制御権限を渡し、停止した時点に戻り、DOMの作成を再開します.
    だから.  <script>  マークを下にします.
    関連項目:https://bbangson.tistory.com/87
    HTML 5の意味要素
    DRF UpdateView Error