TIL 12

3938 ワード
JavaScript モダンJavaScript Deep Dive エリー rendering テキストリンク
JavaScriptで最も一般的な分野は、Webブラウザ環境で実行されるWebページ、アプリケーションのクライアントです.
Web/APpのクライアントJavaScriptはブラウザでHTML、CSSとともに実行されます.したがって,ブラウザ環境を考慮すると,JavaScriptプログラミングをより効率的に行うことができる.
ブラウザは、HTML、CSS、Javascriptで作成されたドキュメントを分割(解析:構文解析)することで、ブラウザにレンダリング(レンダリング:可視化出力)します.レンダーパスは次のとおりです.

ブラウザのレンダーパス

  • ブラウザでは、サーバからの要求やレンダリングに必要なリソース(HTML、CSS、JS、画像、フォントファイルなど)の応答を受信する
  • ブラウザのレンダリングエンジンは、サーバからの応答HTMLとCSSをグループ化してDOM、CSSOMを生成し、それらを結合してレンダリングツリーを生成する
  • ブラウザのJavaScriptエンジン(Ex.V 8,Spider Monkey)は、サーバからの応答JavaScriptをブロック化し、AST(Abstract Syntax Tree)を生成してバイトコードに変換して実行する(この場合、JavaScriptはDOM APIでDOMまたはCSSOMを変更でき、変更したDOM、CSSOMはレンダリングツリーに再マージされる)
  • レンダリングツリーに基づいてHTML要素のレイアウトを計算し、ブラウザ画面にHTML要素
    • を描画する
    要約すると、
    クライアントは、HTML、CSS、およびJSに関する情報をサーバに要求することによってWeb/APpを実行し、サーバ応答のリソースを解析して提示する.
    この場合、<script>をHTMLファイルに配置する場所によってレンダリング速度が異なります.

    HTMLファイル内のスクリプトの場所


    ブラウザは同期しています.つまり、HTML、CSS、Javascriptを上から下へ順に解析して実行します.
    この場合、scriptの位置によってHTMLブロックがブロックされ、DOMの生成が遅れる可能性がある.

    1.<head>に<script>を配置する方法



    ブラウザは、ファイルを読み込むときにhtml、cssを行ごとに読み出して解析します.しかしhtmlを解析する過程でheadにあるscriptに遭遇すると解析は停止する.
    スクリプトをダウンロードして実行し、htmlを解析します.
    この方式ではJavaScriptが大きくなるにつれて読み取り時間が増加し,ユーザのページロード時間が遅延する.

    2.<script>を<body>に配置する方法



    1番方式と異なりhtmlをすべて解析できます.ページがロードされると、scriptはfetch&executeになります.
    この場合、ユーザはhtmlを迅速に受信することができる.ただし、javascriptにページが依存するほど、ユーザーはscriptがページの全部分を使用するために実行されるのを待つ必要があります.
    2つの方法を理解することによって、<head>と<body>との間に<script>を配置する利点が理解される.
    JavaScript解析によるDOM生成割り込み(ブロック)の問題を解決するため、HTML 5からasyncとdeferツリー図が追加されました.

    asyncとdefer


    asyncおよびdeferツリーは、以下に示すように、srcツリーから外部JavaScriptファイルをロードする場合にのみ使用できます.
    すなわち、src言語ツリーがないインラインjavascriptでは使用できません.
    <script async src = "extern.js"></script>
<script defer src = "extern.js"></script>

    asyncレポート

  • HTMLパーティションと外部JavaScriptファイルのロードは非同期同期で行われます.
  • 段javascriptファイルのロードが完了すると、javascriptがスライスされて実行され、HTMLスライスが停止します.
  • の複数のスクリプトタグにasync Art Reportが指定されている場合、スクリプトタグの順序に関係なく、最初にロードが完了したJavaScriptから実行されます.
    • したがって、シーケンス保証が必要なスクリプトラベルにはasync are reportを指定する必要はありません.
  • IE 10以降をサポートします.

    • 調査を遅らせる

  • async Artreviewのように、HTMLパーティションと外部JavaScriptファイルのロードは非同期同期同期で行われます.
  • セグメントでは、JavaScriptのスライスと実行は、HTMLスライスが完了した後であるDOM作成が完了した後に行われる.
    • したがって、
  • は、DOM作成が完了した後に実行する必要があるJavaScriptにとって非常に有用である.
  • IE 10以降、IE 6-9もサポートされていますが、正常に動作しない可能性があります.
    • この文章の内容は『モダンJavaScript Deep Dive』と『Dream Coding by Elly』の資料に基づいて整理されています.
    TIL 9/22
    データベースの4つの特性