デザイナーが知っておきたいDOMの読み込みとjQuery

デザイナーが知っておきたいDOMの読み込みとjQueryheader

こんにちは。ビンゴ豊島です。デザイナーという立場ですがJavaScriptもちょいちょいと書かせていただいております。

今回はDOM操作をする前に知っておきたいDOMの読み込みについて記事を書かせていただきます。対象はDOM操作ばかり、もしくはDOM操作しかしないんですけど?といったデザイナーさんになります。これを読むと今までなんとなく使っていたjQueryも意味を理解した上で使えるようになれるかもしれません。

Webページが表示されるまで

ブラウザがページを表示するまで簡単に書くと下記のようになります。

  1. サーバにページをリクエスト
  2. サーバから返されたHTMLをダウンロード
  3. DOM構築をしつつ描画と画像等のダウンロード
  4. 表示完了

このうち「3. DOM構築をしつつ描画とダウンロード」のタイミングでどのような順番でイベントや処理が発生するかを検証します。

DOMの読み込みを確認するサンプルコード

読み込まれたタイミングや任意のタイミングでコンソールに出力するJavaScriptを記述しています。記述方法は下記3通りです。

  • インラインに直接
  • window.load時
  • 外部JavaScriptに記述したjQueryの$(function(){});
    ※jQueryのready()と同じ動作

このコードをブラウザで表示するとこのようになります。コンソールに注目です。

ss

DOM構築時に呼び出されるJavaScriptの順番

サンプルコードを実行するとコンソールに以下の順番で表示されます。

  1. インラインhead内
  2. undefined
  3. インラインコンテンツ内
  4. <header></header>
  5. インラインコンテンツ最後
  6. <header></header>
  7. 外部JS
  8. Window onload

コードは上から下へ順次処理されていきますのでインラインで直接記述している箇所はその順番でコンソールに表示されます。7と8はイベント発生時に実行していますのでこの順番でイベントが発生したことになります。

インラインでDOM操作をする

先程の順番で1-6まではインラインでJavaScriptを記述しています。このうち2が「undefined」となってしまいました。2ではHTMLのhead内でbody内のheaderタグを取得するJavaScriptを記述しています。一方同じ処理を記述した4と6はきちんとheaderタグを取得できています。

これはコードの上から下へ順次処理がされているためで、2のJavaScriptを実行するタイミングではまだheaderタグの読み込みが完了していない結果undefinedが返されます。headerタグよりも後に記述した4と6は既にheaderタグのDOM解析が完了しているためきちんとheaderタグを取得できています。

DOMのイベント

先ほどのようにインラインで直接記述する場合は必ず取得したいHTML Elementが読み込まれた後にJavaScriptを記述する必要がありますが、DOMの読み込み完了後、ウィンドウの読み込み完了後といったイベントを使えば外部のJavaScriptやHTMLのhead内など好きな場所へコードを記述できるようになります。これは「DOM構築時に呼び出されるJavaScriptの順番」の7と8になります。

jQuery(function(){})

7で使用したjQueryでよく見かけるこのコードですが、この中にコードを書くとDOMの読み込み完了後に呼び出されます。HTMLの最後まで読み込んだら呼び出されると捉えてもよいでしょう。この読み込みには当然画像等は含まれません。そのため画像の読み込みが終わるまで待たされる、といったこともなくDOM解析が完了した時点で即座に実行されます。

またjQueryを使わなくともDOMContentLoadedというものが存在しますが、こちらはIE8以下で動作しません。

DOMのイベント window.onload

8で使用したこのコードはウィンドウ内全ての読み込みが完了した時に発生するイベントです。重い画像や大量の画像があった場合も最後まで読み込みが終わらなければ呼び出されません。そのため今回のサンプルコードでは一番最後に呼び出されています。

まとめ

今回のサンプルコードの場合実行される順番は下記の様になります。

  1. インライン
  2. jQuery $(function(){}) DOM読み込み完了後
  3. window.onload Windowの読み込み完了後

これらを踏まえ適切なタイミングにDOM操作をするとよりDOMやjQueryに関して理解した上で処理を書けるようになるかと思います。

また、UI等であれば表示されているのにマウスやタップ操作をしても暫く反応しないといったことにもなりますので出来るだけ早く処理が走るようにする、準備が整うまで画面に表示しない等の考慮が必要です。


この記事はあなたの役に立ちましたか?他の人達にも役立ちそうでしたら、上のボタンより共有をお願いします。共有して頂けたら今後提供する記事の参考やモチベーションアップにつながります。

Categorized: jQuery