asyncとdeferとuse strict

2463 ワード
テキストリンク

asyncとdeferの比較


htmlにjavscriptを含める方法はいろいろあります.

1.headラベルにはscriptラベルを含む属性はありません。

<head>
	<script src="main.js></script>
</head>
ユーザーがhtmlファイル、すなわちWebページをロードすると、ブラウザはコードの最上位から行ごとにコードを読み取り、実行します.前述したように、コードを記述する際にhtmlコードをパケット化する際にscriptタグに遭遇すると、htmlをパケット化するプロセスが一時停止し、スクリプトファイルがダウンロードされ、すぐに実行されてからhtmlがパケット化されます.この場合、htmlのロードはjavascriptコードがすべて実行された後に行われるため、多くの時間がかかり、ユーザーの観点からページのロードが遅いと感じるかもしれません.

2.bodyの末尾にscriptを追加


bodyの末尾にscript要素がある場合は、すべてのhtmlをグループ化し、javascriptをダウンロードして実行します.ページが最初にロードされるので、ユーザーの立場からは素早くロードできますが、ウェブサイトがJavaScriptに依存している場合は、画面が正常にロードされず、JavaScriptのダウンロード、実行時間を待つ必要があります.

3.headではscriptを使用しますが、asyncという属性値を使用します。


asyncを使用してhtmlをパーティション化するときにscript要素に遭遇すると、htmlパーティション化と同時にjsファイルをダウンロードするパラレル構造を使用して操作されます.その後、jsファイルのダウンロードが完了したら、htmlのパーティション化を停止し、jsを実行し、残りのhtmlをパーティション化します.時間は短縮されますが、JavaScriptでdome要素を操作するとエラーが発生する可能性があります.また、jsの実行時にhtmlのスライスが停止し、ユーザー体験にはいくつかの負の要因があります.

4.eadではscriptを使用するがdefer属性値を使用する


deferプロパティを使用すると、htmlをパケット化するときにscript要素に遭遇した場合、jsファイルのダウンロードとhtmlのパケットは並列構造になります.これまでasyncと同様であったが,deferではjsファイルの実行はダウンロード後ではなくhtmlスライスが完了した後に行われる.この場合、パラレル構造を採用しているため、ダウンロード時間が短縮され、htmlが最初にロードされるため、ユーザはロードされた画面を先に見ることができる.またhtml,jsが互いに依存していても,実行時間を最小化する最も有効な方法といえる.

+複数のスクリプトを実行


asyncはダウンロードが完了した順序で実行され、作成順序、意図に関係なくjsファイルが順序に依存している場合、正常に動作しない可能性があります.
逆にdeferを使用すると、すべてのダウンロードが完了した後、上から下へ順次実行できるため、必要な順序で実行できます.

use script


JavaScriptを使用する場合は、use strictを宣言することをお勧めします.
JAvascriptは非常に柔軟な言語で、新しく制定されたES 5で存在しない機能を使用して、下位互換性を実現することをサポートしています.新しく定義された変更を正常に実行するには、ES 5構文の「use strict」宣言に従うようにuse strictを宣言する必要があります.
! use strictは最上位にある必要があります.
ref:
javascript.ingo
Elly DREAM符号化
3101astronomy
22.4.18 [HackerRank]Java End-of-file