JavaScriptの非同期

5204 ワード
webdev javascript テキストリンク

導入
何度このJavaScriptをHTMLに追加しましたか<script src="path/to/some/javascript"></script> しかし、どのようにブラウザのコードラインを処理することを熟考したことがありますか?なぜ私たちは時々async or defer スクリプトタグへの属性?
この記事では、AsyncとDefer属性の主要な違いを理解し、使用する方が良いと思います.しかし、まず最初に、我々が彼らを全く使わないならば、何を理解しましょう.
<script> asyncまたはdeferのないタグ
次のコードを見てみましょう.
<html lang="en">
  <head>
    <title>Async vs Defer</title>
    <script src="path/to/some/javascript"></script>
  </head>
  <body>
    <h1>Async vs Defer</h1>
  </body>
</html>
ブラウザがこのファイルを実行すると、HTML行を行で解析することから始めます.この例では、ブラウザがscript タグはHTML構文解析を停止し、JavaScriptファイルを取得し始め、JavaScriptファイルを取得した直後にJavaScript行を実行します.

JavaScriptファイルのこのフェッチの間、HTML構文解析は停止されます、そして、これはDOMの上で内容レンダリングを遅らせて、結局ウェブサイトを減速させます.
あなたが大規模なプロジェクトに取り組んでいるならば、これは良いことではありません、そして、1秒の遅れさえ、人々にあなたのウェブサイトから戻って、最終的に収入を傷つけるように導くかもしれません.
これを使って解決できますasync or defer では、見てみましょう.

async属性
<script async src="path/to/some/javascript"></script>
我々が使うときasync スクリプトタグの属性.ブラウザはHTMLファイルを解析することから始まり、ブラウザがスクリプトタグを見たとき、HTML構文を続けながらJavaScriptをバックグラウンドで取得し始める.スクリプトが実行されると、ブラウザはHTML解析を停止し、JavaScriptファイル行を行単位で実行します.JavaScriptの実行が終了すると、ブラウザはHTML解析を続けます.


遅延属性
<script defer src="path/to/some/javascript"></script>
The defer 属性はasync . 一つの違いは、defer 属性はHTML構文解析が完全に終了するまで実行されません.どのような意味は、HTMLを解析することでブラウザが起動し、バックグラウンドでJavaScriptをscript タグとHTMLの構文解析を続けます.JavaScriptはHTMLが完全に解析された後にのみ実行されます.


問題async複数のスクリプトがHTMLファイルで使用されている場合、いくつかの他の依存しているので、正しく動作するように、我々は他の依存しているスクリプトがロードされ、最初に実行されるスクリプトをこのスクリプトに依存してスクリプトの前に実行する必要があります.
The async 属性は異なるJavascriptファイルが実行される順序を保証しません.
例を挙げましょう.
<script async src="script-1"></script>
<script async src="script-depended-on-script-1"></script>
<script async src="script-depended-on-script-above-this"></script>
我々が使うならばasync この場合、それはそれを保証しませんscript-1 はscript-depended-on-script-1 これらのスクリプトがバックグラウンドで取得されているので、そのサイズやネットワークの問題のような理由のために、他の前にフェッチされる可能性があります.それでscript-depended-on-script-1 が最初にフェッチされると、async 属性ブラウザはJavaScriptを実行したりブラウザでダウンロードした直後に実行します.
  • defer しかし、HTMLの構文解析が行われた後にすべてのスクリプトが実行されるので、スクリプトが他のブラウザの前で利用可能であっても、そのスクリプトは順序で実行されます.

    • 結論
  • あなたが互いに依存している複数のスクリプトを持っているならばdefer 実行順序を保証します.
  • あなたがHTML構文をブロックしたくないならば、使用してくださいdefer
  • 個人的にお勧めdefer ほとんどの時間.
    • 私はあなたがこの興味深いと何かを学んだと思います.ありがとう.

    Per Aspera Ad Astra

    android工場モード(二)
    [プログラマ]2つの整数の和