async vs defer - JavaScript実行を理解する

6179 ワード
javascript programming webdev codenewbie テキストリンク
Web開発者として、あなたのコードでこの行を何回書きましたか?
<script src="script.js"></script>
おそらく、あまりにも多くの時間をカウントするが、本当にどのようにブラウザのコードのこの単純な行を処理を理解していますか?我々は常に私たちを置くことをお勧めしている<script> タグの末尾のタグ<body> しかし、再び、なぜそうですか?私たちが置くことができる他の場所はありますか<script> タグ?どうすれば<script> 内部タグ<head></head> HTML文書のタグ
<!-- inside the head tag -->
<head>
    ...
    <title> .... </title>
    <script src="script.js"></script>
</head>

Aahhh、これらの質問の十分な.今ではそれらのすべてを理解する時間です.
まず第一に<script> 我々が望むどこにでもタグを付けます、しかし、それがあなたのページパフォーマンスに影響を及ぼすことができる1つのことを覚えてください.
だから今、正確に理解しましょう<script> タグローディング機能と最も重要なのはどのように使用することができますasync and defer JavaScriptの読み込みを高速化し、ページのパフォーマンスを向上させる.

ブラウザの解析


理解する前に<script> 読み込み中、ブラウザがHTMLを解析する方法をまず理解する必要があります.幸いにも、それはかなり簡単です.ブラウザはドキュメントの一番上から下までHTMLを解析します、そして<img> タグは、そのリソースの要求を送信し、解析を続けます.注意すべき重要なことはブラウザがHTMLを解析するのを止めないことですimg src . これは、あなたがWebページをロードするとき、彼らがバックグラウンドでロードされて、HTMLが解析された後にダウンロードを終えるかもしれない時から、イメージがポップアップするので、ページが飛び回るのに気がつくかもしれません.
しかし、それは<script> タグ.ブラウザがAに遭遇すると<script> HTMLを読み込むとき、ブラウザはダウンロードして全体を解析するよう強制されます<script> そして、それがDomを構築するためにHTMLの残りを読むことを続ける前に、最初にそれを評価してください.これが私たちを置くことをお勧めします<script> HTMLの解析を遅延させないようにHTML本体の下部にタグを付けます.
今、あなたはそれを置くことを考えることができます<script> HTML本体の一番下にあるタグは理想的ですが、もしHTMLが大きすぎて、ダウンロードして解析するのに時間がかかるのなら、JavaScriptはHTMLのすべてが解析されるまでダウンロードを開始しないでしょう<script> ダウンロードして、ページのパフォーマンスに影響を与える.これが理由ですasync and defer 属性が作成されました.

非同期と遅延


両方async and defer 属性読み込み<script> DOMをブロックせずに<script> Aのようなタグ仕事<img> 上記のようにパーサーにタグを付けます.これは、スクリプトがバックグラウンドでフェッチされ、待機せずに通常の構文解析を継続することを意味します.OK、それは公平です、しかし、それらの間の違いは何ですか?さあ、ここに行きます.

async対defer


両方async and defer 一見して同じことをするように見えるが、それはそうではない.

deferはDOMを待ちますが、asyncは-


最初と最も重要な違いはasync DOMが完全にロードされているかどうか、他の側では気にしないdefer DOMが最初にロードされるのを待ち、その後、スクリプトの実行を開始します.
たとえば、あなたがあなたのHTMLドキュメントで25000ボタンを持っていると言うと、今、スクリプトの両方を使用してDOMのすべてのボタンを選択し、それらの長さを取得します.
<head>
  <script src="defer.js" defer></script>
  <script src="async.js" async></script>
</head>
<body>
  <div class="container">
  <!-- 25000 buttons -->
  </div>
</body>
スクリプトコードです.
//! Async script code here
let asyncButton = document.querySelectorAll('button');
console.log(`Async script button count: ${asyncButton.length}`);


// Defer script code here
let deferButton = document.querySelectorAll('button');
console.log(`Defer script button count: ${deferButton.length}`);
そして、コンソール出力です.

ご覧の通り、async DOMが完全にロードされ、スクリプトの実行時に読み込まれたすべてのボタンを選択するのを待ちません.defer DOM要素が最初にロードされるのを待っていて、それがDOMで提示されたすべてのボタンを選択している理由です.

If your script is dependent on the DOM, then never ever use the async attribute, there's the possibility that the element you need get undefined and this is a potential source of bugs.


ファイルの順序を維持します。


しかし、それを理解するために別の例を取ることは何ですか?つのスクリプトがあるとしましょう.各スクリプトはそのスクリプトの数を記録します.今、我々は使用するつもりならasync スクリプト内の属性、スクリプトの実行順序は予測できません.
    <script src="one.js" async></script>
    <script src="two.js" async></script>
    <script src="three.js" async></script>
    <script src="four.js" async></script>
コンソール出力はこのようになります.

しかし、我々が使用するならばdefer すべてのスクリプトの属性?
    <script src="one.js" defer></script>
    <script src="two.js" defer></script>
    <script src="three.js" defer></script>
    <script src="four.js" defer></script>
そして、出力です.

だから今、あなたは明らかに

defer always maintain the order of the script so if you have scripts that depend on each other then always consider using defer rather than async.


結論

  • 追加defer 属性は、DOMが最初にロードされ、スクリプトが与えられた順序で実行されることを確認します.
  • 追加async 属性はロードされるとすぐにスクリプトを実行します.したがって、スクリプトが互いに依存しているかDOMに依存しているなら、それを使用しないでください.
  • 実際にはdefer はasync , そしてほとんどの場合、あなたが欲しいdefer の代わりにasync .
  • async あなたが真ん中でスクリプトをロードするとき、大きいです.
    • それで全部だasync and defer JavaScriptのスクリプト読み込み.あなたがこの記事を楽しんだならば、それについて友人に話してください、さもなければ、あなたのソーシャルメディアハンドルでそれを共有してください、そして、あなたが以下にコメントして、それについてあなたの考えを共有することを確認してください.ありがとう.🙏
    [BOJ-JAVA]1676工場0の数量
    Redis学習(一):redisクラスタの哨兵モードでの負荷均衡