本記事は一人アドベントカレンダー企画の一つです。
30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー
JAVASCRIPT.INFOを元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。
2.2.1 ページのライフサイクル: DOMContentLoaded, load, beforeunload, unload
知らない単語
-
ハンドラとは
- コンピュータプログラムやその一部分で、何らかの処理要求が発生したときに起動されるもの
-
トリガとは
- きっかけになる出来事が起こったら自動的に特定の処理を起動するソフトウェアの仕組み
学んだこと
HTML ページのライフサイクルは、3つのイベントを持つ
DOMContentLoaded – ブラウザが HTML を読み込み、DOM ツリーは構築されたが、写真 img のような外部リソースやスタイルシートはまだ読み込まれていない可能性がある
load – ブラウザがすべてのリソースを読み込んだ
beforeunload/unload – ユーザがページを離れようとしている時
- DOMContentLoaded と scripts
ブラウザが最初にHTMLをロードし、script.../script に出くわすと、DOM の構築を続けることができないので、このようなスクリプトがすべて実行された後にのみ DOMContentLoaded は発生する可能性がある
外部スクリプトも、スクリプトがロードされ実行されている間はDOM の構築は一時停止するので、DOMContentLoaded は外部スクリプトも待つ
async または defer もつ外部のものを除いたすべてのスクリプトが実行される
- document
document.readyState – ドキュメントの現在の状態で、変更は readystatechange イベントで追跡することが可能
loading – ドキュメントを読み込み中
interactive – ドキュメントはパースされ、DOMContentLoaded とほぼ同じ時間に発生する
complete – ドキュメントとリソースが読み込まれ、window.onload とほぼ同じ時間に発生する
感想
現在のドキュメントがどのような状態にあるのかをしっかり把握したい。
2.2.2 スクリプト: async, defer
知らない単語
- 無し
学んだこと
- defer
defer 属性はブラウザにスクリプトを待たないよう指示する代わりに、ブラウザは HTML の処理を継続し、DOM を構築する、スクリプトは バックグラウンドでロードされ、DOM が完全に構築されたときに実行される
defer を指定する
<p>...content before script...</p>
<script defer src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>
<!-- すぐに表示されます -->
<p>...content after script...</p>
要は
defer をもつスクリプトはページをブロックしないし、DOM が準備できた時に実行される
- async
async 属性は defer に似て、スクリプトをブロックしない
async 属性はスクリプトが完全に独立していることを意味する
ブラウザは async スクリプトをブロックしない
他のスクリプトは async スクリプトを待たず、async スクリプトも待たない
DOMContentLoaded は async スクリプトの前で発生する可能性がある
- 共通点
async と defer には共通点が1つある
スクリプトのダウンロードはページのレンダリングをブロックしないので、ユーザはページコンテンツを見ることができ、＝そのページのことを知ることができる
感想
スクリプトをブロックしないので、async 属性は deferと似ている。間違えないように特徴を捉えて覚えたい。
2.2.3 リソース読み込み: onload と onerror
知らない単語
- iframes
- HTMLのタグの一つで、Webページ内に矩形の領域を設け、別のWebページなどを読み込んで表示するもの
学んだこと
スクリプト, iframes, 画像 などの読み込みを追跡するイベント
onload – ロードが成功
onerror – エラーが発生
- スクリプトの読み込み
外部スクリプトにある関数を呼び出す時、
下記のようにして動的にロードできる
let script = document.createElement('script');
script.src = "my.js";
document.head.append(script);
スクリプトの読み込みを待ってから初めて呼び出せる
- script.onload
主なヘルパーは load イベントで、スクリプトがロードされ、実行された後にトリガされる
let script = document.createElement('script');
// 任意のドメインから任意のスクリプトがロードできる
script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"
document.head.append(script);
script.onload = function() {
// スクリプトはヘルパー関数 "_" を作る
alert(_); // 関数は利用可能
};
- script.onerror
スクリプトの読み込み中に発生したエラーは error イベントで追跡することが可能
感想
script.onloadとscript.onerrorについて学んだが、readystatechange イベントもリソースに対して機能する。しかしload/error イベントの方がシンプルなため、殆ど使われない。
役割は同じでも様々な種類のイベントやメソッドがあるので、間違えないようにしたい。
最後に
スクリプトやリソースについて学んできたが、時間が経つと忘れてしまうので、書き方をしっかり覚えておいて、実際に使う場面ですぐに思い出せるようにしたい。
また、次の記事で最後なので、終わってからもう1度しっかり復習して定着させるようにする。