2019年10月27日

$(document).readyと$(window).loadの違い|意外と知らない落とし穴

$(document).readyと$(window).loadの違い

お世話になっております。佐藤です。

今回はJavaScriptで陥りやすく、意外と知らない方も多いであろう実行処理タイミングに関して解説していこうと思います。

まず、$(document).readyと$(window).loadの違いを解説する前にウェブサイトが表示される際にどのような処理がされているか理解する必要があります。

パーサーについて

Webサイトがユーザーのリクエストによって呼び出されると、適切なファイルがブラウザに返されます。主にHTMLファイルだと思いますが、ブラウザはそのファイルを解析し、ユーザーが見えるように画面を描写してくれます。

その解析行動を「パーサー」と呼びます。そのパーサーは基本的にファイルの上から順番に解析していきます。

</body>の前に<script>タグを書くことが推奨されていますが、それはこのパーサーの性質によるものです。<head>内に記述してしまうとパーサーの途中でJSファイルを読み込む事になり、ユーザーの体感速度を下げてしまう危険性もありますし(見た目が描写されないので)、DOM操作をしようとするとエラーが発生する可能性が高いです。
上記のようなブラウザの仕様によって、JSファイルの実行タイミングを意識する事は結構大事になってきます。

ここから先が$(document).readyと$(window).loadの話になっていきます。

イベントの順番

  1. HTML、CSSの読み込み(パーサー)
  2. HTML、CSSの読み込み完了
  3. 画像や動画などの読み込み
  4. 画像や動画などの読み込み完了

 基本的には以上のような順番で処理されていきます。よく画面にサイトは描写されているが画像の表示、動画の表示が遅いなどの現象に出くわしたことがあると思います。それは以上のような背景があるためです。

この時に(やっと)出てくるのが、$(document).readyと$(window).loadです。この2つの違いを理解することでユーザーの体感速度などを高めることができ、SEO対策にもなります。先ほどの順番を書き換えると以下のような順番になります。

  1. HTML、CSSの読み込み(パーサー)
  2. HTML、CSSの読み込み完了
  3. $(document).readyの実行
  4. 画像や動画などの読み込み
  5. 画像や動画などの読み込み完了
  6. $(window).loadの実行

つまり画像等を処理しない場合に関しては、$(document).readyで処理を書いても問題ありませんし、体感速度も早くなります。逆に画像や動画の処理を$(document).readyに書いてしまうと意図しない結果になることもあります。私は動画の処理をする際に$(document).readyに書いていて、意図しないエラーなどが発生して時間を取られた思い出もあります。

JavaScriptの世界はとてつもなく広く、全ての例が上記に当てはまるとは言えませんが基本を理解する事はとても重要だと思います。結構、ハマってしまうことも多いので。
これを機会にJavaScriptの基本を復習していこうと思います。