[WEB]スクリプトのロードポイント-async&defer

13152 ワード

script web browser html テキストリンク

📙 ブラウザがHTMLを解析するとどうなりますか?

スクリプトのロードポイントを理解する前に、ブラウザがHTMLドキュメントを解析したときに発生したことを理解したほうがいいです.

読み込みとデータスライスHTTPモジュールまたはファイルシステムに送信されたリソースフロー(リソースフロー)を読み出すことによって、DOM(Document Object Model)ツリーがパケットによって生成される.

CSSスタイルテクスチャ
ドキュメント要素の表示方法を決定する要素をグループ化します.

レンダリングツリーの作成
DOMツリーを作成するときに、フラクタルを使用してレンダーツリーを作成します.表示する順序とドキュメントのビジュアル要素として、正しい順序でコンテンツを描画するには、レンダーツリーと呼ばれる個別のツリー構造が必要です.

レイアウト
レンダーツリーを生成するときに、各レンダーオブジェクトの位置とサイズを持つプロセスをレイアウトと呼びます.

描画

描画フェーズで、レンダーツリーをブラウズし、特定のメモリ領域にRGB値を入力するプロセスです.

パシン?

ドキュメントの割り当ては、ドキュメントから読み込まれたデータを理解し、使用可能な形式に変換することを意味します.このような動作をする機能やプログラムを解析器と呼ぶ.
ブラウザでHTMLドキュメントを分割した結果を、分割ツリー(parse tree)またはシンタックスツリー(syntax tree)と呼びます.

📕 一般スクリプトのロード

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="default.css" />
    <link rel="stylesheet" type="text/css" href="dark.css" />
    <script src="jquery.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

上記の文書をロードすると、ブラウザはまずHTMLをグループ化し、外部リソースCSS、JSファイルをロードする.
DOMツリーが完了すると、イメージファイルまたは外部リソースがロードされ、すべての操作が完了します.
ここで重要なのは、ブラウザがscriptを解析したときにどのようなことが起こるかということです.通常、インラインコードではJavaScriptがすぐに実行され、ファイルに渡されると、転送が完了したときに実行されます.問題は、ブラウザがJavaScriptをダウンロードして実行すると、以下のようにドキュメントのパケットが停止します.

一方、CSSはDOMツリーを変更しないため、ドキュメントのグループ化を待つか停止することはありません.
上のコードでは、スタイルをロードしてからスクリプトをロードしますが、スクリプトファイルをロードしてからスクリプトにスタイル情報を要求すると、エラーの結果、ユーザーエクスペリエンス(UX)が低下します.このような問題はよくないように見えるが、頻繁に発生している.
そこで、上記のコードをbodyタグの末尾に置くことをお勧めします.以下に示します.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="default.css" />
    <link rel="stylesheet" type="text/css" href="dark.css" />
  </head>
  <body>
    ...
    <script src="jquery.js"></script>
    <script src="main.js"></script>
  </body>
</html>