JavaScriptベース1

JavaScriptを学ぶ前に必ず身につけなければならない知識の整理!

Web APIとは?

Webアプリケーションプログラミングインターフェースの略で、ブラウザの理解を示す関数

・

ブラウザがHTMLページをダウンロードして実行する順序

上から逐行分析を開始し、HTML科CSS統合解析後、ブラウザにメッセージを送信し、ブラウザがその情報をレンダリングする.

headにスクリプトが含まれている場合の実行順序

<script src="../test.js"></script>

HTMLコードを行単位で読み込んで解析し、スクリプトが見えるとHTML解析を停止し、スクリプトをダウンロードして実行します.次にHTMLを再度解析し、ブラウザに情報を渡します.

上記のコードのjsファイルが大きく、ネットワーク速度が遅い場合、ユーザーはHTMLページを表示するのに時間がかかります。この場合、body tagの最後にscriptを入れる方法があります。

HTMLをすべて解析してscriptをダウンロードして実行するため、ユーザーはHTMLの内容をすばやく表示することができます.
ただし、HTMLページがjsに依存している場合(jsでの条件表示が異なる)通常のページロードにはならないかもしれません.また、jsが実行されるまで待つ時間もあります.

asyncを使用する場合

<script async src="../test.js"></script>

HTMLコードを解析するときに、スクリプトをダウンロードして実行します.
ブラウザがHTMLをダウンロードして解析するときにasyncを見ると、解析を停止しscriptをダウンロードします.
ダウンロードが完了したらscriptを実行し、残りのHTMLを解析します.

parsing HTML > fetching js, executing js > parsing HTML

この場合、複数のスクリプトがある場合、スクリプト宣言の順序にかかわらず、ダウンロードが完了したスクリプトが実行されます.
長所:速い
欠点:スクリプト宣言に依存すると、問題が発生する可能性があります.HTML解析が完了する前にスクリプトを実行するため、スクリプトに依存するHTMLでは機能しない場合があります.

deferを使用する場合

<script src="../test.js" defer></script>

HTML解析ではスクリプトのみをダウンロードし、HTML解析が完了した後に実行します.
deferを無効にすると、デフォルトはtrue、有効にするとfalseに設定されます.
リファレンス-外部JavaScript(async,defer)を読み込みます。
... 作成中

バニラスクリプトでコードを書くとき..。

コードの一番上use strict;.

これにより、宣言されていない変数に値を割り当てるか、タイプを考慮せずに変数に値を含めるなど、誤った処理が発生します.JavaScriptの柔らかさは消えていますが、より安全です.