ブラウザのレンダリング方法

11011 ワード
エクスプローラ テキストリンク
これに先立ち,Webの動作を理解し,クライアントがサーバにデータを要求し,サーバがこれらの要求に応答することを理解した.
今日、クライアントがサーバ応答のデータをブラウザに表示する方法について説明します.

ブラウザのレンダーパス


まず、ブラウザのレンダリングプロセスを次のセクションに分けます.

ブラウザのレンダーパス

  • ブラウザは、HTML、CSS、JavaScript、画像、フォントファイルなどのレンダリングに必要なリソースをサーバに要求し、応答する.△これはWebの動作方式から得られたものです.
  • ブラウザのレンダリングエンジンは、*サーバからの応答HTMLとCSSを分割することによってDOMとCSOMを作成し、両者を結合してレンダリングツリーを作成します.
  • ブラウザのJavaScriptエンジンは、サーバが応答するJavaScriptをグループ化してAST(Abstract Syntax Tree)を生成し、バイトコードに変換して実行する.JavaScriptがDOM APIを介してDOMまたはCSSOMを変更すると、変更後のDOMとCSSOMがレンダーツリーにマージされます.
  • の組み合わせのレンダリングツリーに基づいてHTML要素のレイアウトを計算し、ブラウザでHTML要素を描画します.
    • *pasingとは、文字列を意味のあるタグに分解し、構文と構造に基づいてツリー型データ構造(parse tree)を作成するプロセスです.
    ここで、上記の手順をHTML>CS>Javascriptの順によく読みます.

    HTMLパケットとDOMの生成


    HTMLドキュメントを分割することで、その成果物DOMを構成する手順は、次のとおりです.
  • サーバは、ブラウザから要求されたHTMLファイルを読み込み、それを>メモリに保存し、応答>メモリに格納されたバイト(バイナリ数:101101000100...)に応答する.
  • ブラウザは、metaタグの文字セットに従って、指定された符号化方式(UTF-8)で応答バイト形式のドキュメントを文字列に返す.
  • 文字列に変換されたHTMLドキュメントを、構文的なコードの最小タグ(token)に分解します.
  • タグは、ノードを作成するためにオブジェクトに変換されます.
    • 生成されたノード
  • は、HTML要素間の親子関係に基づいて、ツリー構造(すなわち、文書オブジェクトモデル)から構成される.

    • CSSグループとCSSOMの作成


    レンダリングエンジンは、HTMLドキュメントを行ごとにパーティション化し、DOMを生成します.次に、CSSをロードするリンクラベルまたはスタイルラベルに遭遇した場合は、DOMの作成を停止し、CSSパケットの成果物CSSOMの生成を続行します.
    <!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8"> // 여기까지 해석한후, 
  <link rel="stylesheet" href="style.css"> //link 태그를 만나면서 DOM생성을 중지하고 CSS파일을 서버에 요청한 후 응답받아 CSS파싱을 시작합니다. 
    
    ...
    CSSパケット化プロセスはHTMLのパケット化プロセスと同じで、バイト>文字>タグ>ノード>CSSOM生成の順である.

    レンダーツリーを作成するには


    これまで、レンダリングエンジンはHTMLとCSSをブロックすることでDOMとCSSOMを作成してきた.これで、レンダーツリーにマージし、レイアウトを計算してブラウザにペイントするだけで済みます.

    レンダーツリー(Render Tree)は、名前でレンダーするツリー構造です.したがって、スクリーン上でレンダリングすべきでないノードのみを除外し、レンダリングツリーを表示するノードに整理します.たとえば、HTMLのmetaタグ、スクリプトタグ、CSSのdisplay:noneなどの要素は含まれません.
    完了したレンダリングツリーは、HTML要素のレイアウトを計算し、ブラウザでピクセルをレンダリングするための描画処理に入力します.これでレンダリングされた画面が表示されます

    次の場合、上記のレンダリング手順を繰り返します.
  • JavaScriptによってノードが追加または削除された場合、
  • ブラウザ更新変更ビューポート大時間:
  • レイアウトのスタイルを
    • に変更
    レイアウト計算と塗りつぶしを再実行すると、レンダリングが繰り返され、パフォーマンスに影響を与えることに注意してください.

    JavaScriptパーティション


    JavaScriptのパーティションはCSSパーティションと同様に、レンダリングエンジンがHTMLドキュメントを行単位で読み込むときにscriptタグに遭遇すると、JavaScriptエンジンに制御権を渡して起動します.
    JavaScriptエンジンは,CPUが理解できる低レベル言語を用いてJavaScriptコードをグループ化し,*AST(>DOM,CSSOMなど)を生成し,>ASTに基づいてバイトコードを生成し,>エージェントが実行できるようにする.
  • ASTは、タグの構文的意味と構造を反映するツリー型のデータ構造です.

    • 下塗りと下塗り


    JavaScriptコードを実行するときにDOM APIを使用してDOMとCSSOMを変更すると、変更したDOMとCSSOMはレンダーツリーに再結合され、レイアウトと塗りつぶしプロセスで再レンダーされます.このプロセスを「リフロー」(Reflow)、「ペンキ塗り直し」(Repaint)と呼びます.
    再描画はレイアウトを再計算し、再描画はレンダリングツリーの再結合に基づいて行われます.リフレッシュは、ノードの追加/削除、要素のサイズ/場所の変更、ウィンドウサイズの再調整など、レイアウトに影響を与える場合にのみ実行されます.したがって、リフレッシュとリフレッシュは必ずしも順番に実行されるわけではありません.レイアウトが変更されていない場合は、再ペイントのみが実行されるためです.

    これで、ブラウザのレンダリング手順と注意すべき問題について説明しました.

    もっと知るのはいいこと


    JavaScriptパーティションによるHTMLパーティションの割り込み


    HTML、CSS、JavaScriptの学習を始めたばかりの頃は、スクリプトタグを本体の下部に挿入することを覚えていたかもしれません.原因を詳しく調べてみましょう.
    レンダリングエンジンとJavaScriptエンジンコードがシリアルにグループ化されます.すなわち、上から下へ逐行同期して読み出す.
    <!DOCTYPE html> 
 <html>  
  <head>   
   <meta charset="UTF-8">
   <link rel="stylesheet" href="style.css"> //HTML 파싱 중단 > CSS 파싱 
   <script src="app.js"></script> //HTML 파싱 중단 > 자바스크립트 파싱/실행 
    ...
    ```
script 태가그 위의 코드와 같이 헤드안에 있을 경우 다음과 같은 문제가 발생할 수 있습니다.

1. DOM이 완성되지 않은 상태에서 자바스크립트의 코드가 DOM Api를 통해 DOM을 조작하면 에러가 발생할 수 있습니다.
2. 자바스크립트의 로딩/파싱/실행으로 인해 페이지의 로딩 시간이 길어질 수 있습니다.

그렇기때문에 script코드는 DOM이 모두 생성된 후 파싱/실행될 수 있도록 아래와 같이 바디의 가장 하단에 적어주면 DOM조작시 오류가 없고, HTML 파싱이 블로킹 없이 실행되어 페이지 로딩시간이 단축됩니다.

```js
<!DOCTYPE html> 
 <html>  
  <head>   
   <meta charset="UTF-8">
   <link rel="stylesheet" href="style.css">
  </head>
  <body>
   ....
   <script src="app.js"></script>
  </body>
   
    ...
    ```

## Script 태그의 async/defer 어트리뷰트
자바스크립트 파싱에 의한 HTML 파싱 블로킹현상을 근본적으로 해결하기 위해 HTML5부터 async와 defer 어트리뷰트가 추가되었습니다.

```js
<script async src="script.js"></script>
<script defer src="script.js"></script>
    asyncとdeferツリーは、HTMLパーティションと外部JavaScriptファイルのロードを同期させることができます.ただし、2つのツリービューの間にはJavaScriptの実行時の違いがあります.asyncAsync Art Reportは、HTMLパーティションと外部JavaScriptファイルを同時に非同期でロードします.ただし、JavaScriptファイルがロードされると、JavaScriptはすぐにスライスと実行され、HTMLスライスは停止します.すなわち、async Art Reportを使用するとJavaScriptファイルを非同期でロードできますが、JavaScriptファイルを完了した順序で実行するため、実行順序は保証されません.
    deferdeferツリーはasyncツリーと同じです.HTMLパーティションと外部JavaScriptファイルのロードは非同期で行われるためです.ただし、JavaScriptパーティションと実行は、HTMLパーティションが完了した後(つまりDOMが作成された後)に行われるのとは異なります.これは、DOM作成が完了した後に実行する必要があるJavaScriptファイルに役立ちます.

    HTTP 1.1とHTTP 2


    HTTPはブラウザとサーバがWeb上で通信するプロトコルである.HTTPの詳細については、次の記事でさらに議論しますが、今回はHTTP 1.1と2.0の違いを簡単に知りたいだけです.
    HTTP/1.1は一度に1つの要求と1つの応答しか処理しない.これは、複数のリクエストまたはレスポンスを同時に処理できないことを意味します.したがって、HTMLドキュメント内の複数のリソースリクエストは、それぞれリクエストされ、応答され、リソースリクエストの数に比例して応答時間が増加し、以下に示すようになる.

    HTTP/2は、複数の要求と応答を同時に処理することができる.そのため、複数のリソースを同時に要求し、応答することができ、グーグルはHTP/1.1のページロード速度がHTP/2より約50%速いと述べた.

    今日では、短時間でアドレスを検索し、ブラウザで出力内容を表示する方法について説明します.短い一瞬だったけど、その時間はネットが本当に忙しかった.
    次の文章では、HTTPについてよく知っていますが、実際に説明するのは、歪んだHTTPについて理解してみましょう.
    この記事は、モダンJavaScript Deep Diveの第38章「ブラウザのレンダリングプロセス」を学び、まとめたものです.この章では、ブラウザのレンダリングプロセスを非常に明確にまとめ、このプロセスをよりよく理解することができます.
    詳細Generics Collections TList(10):OnNotifyイベント
    33. Search in Rotated Sorted Array