スクリプトが実行されるタイミング

広告

JavaScriptが実行されるタイミングを確認します。

ブラウザはスクリプトが記述されたHTMLファイルやXHTMLファイルを読み込み順に解析しながらブラウザに表示していきます。その途中に<script>要素が現れるとHTMLなどの解析を一時中断し記述されたスクリプトが実行されるのを待ちます。そしてスクリプトの実行が終了すると改めてHTML文の解説を実行していきます。

次の例を見てください。 

<p>HTML文の解析中</p>
<p>この次にスクリプトが実行される</p>

<script type="text/javascript"</p>
document.write("<p>スクリプトが出力</p>");
</script</p>

<p>スクリプトが終了</p>
<p>HTML文の解析を続行</p>

上記ではまず通常のHTML文が順に解析されたブラウザに出力されていきます。そしてスクリプトが見つかるといったんスクリプトの実行へ処理が移りします。

スクリプトでは単に計算だけを行う場合もありますし、何らかの出力を行う場合もあります。今回は文字列を出力しています。

そしてスクリプトの処理が終わると、その次のHTML文の解析が引き続いて実行されていきます。結果的に次のようにブラウザには出力されることになります。 

HTML文の解析中
この次にスクリプトが実行される
スクリプトが出力
スクリプトが終了
HTML文の解析を続行

このようにスクリプトはHTMLファイル内の記述された位置で実行が行われることになります。その為、何らかの出力などを行っている場合にはあたかもスクリプトが記述された位置に出力される内容が書かれているようにブラウザには表示されることになります。

スクリプトが見つかるとスクリプトの実行が終了するまでブラウザ上へのHTML文などの出力がいったん停止します。あまり重い処理をスクリプトで行うとスクリプトが終了するまで残りのHTML文がブラウザに表示されませんので注意が必要です。

defer属性

出力を行わないスクリプトの場合、仕様上ではscript要素にdefer属性を付けることで実行するタイミングを後にずらすことが可能です。ただしまともに実装されているブラウザがほとんどないため現時点では利用できないと考えておいたほうがいいです。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<p>HTML文の解析中</p>
<p>この次にスクリプトが実行される</p>

<script type="text/javascript" src="./js/script2_1.js">
</script>

<p>スクリプトが終了</p>
<p>HTML文の解析を続行</p>

</body>
</html>

document.write("<p>スクリプトが出力</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p2-1

( Written by Tatsuo Ikura )