話題の動画を表示する Web サイト BuzzTube の表示速度改善策。

いままで window.onload で動画を表示する部分を組み立てていたが、これだとページロードの際に動画がぜんぜん出てこない。すごく時間がかかる。 window.onload はページ内の JavaScript, CSS, 画像ファイルをすべて読み込んだあとに実行されるらしい。

なので、もうちょっと早いタイミングで実行しようと思って、HTMLがDOMツリー構築された後に実行されるように、jQuery(document).ready というのを使うようにしてみた。

いままではこんな感じ。


window.onload = function(){
  switch_video(); // 動画表示部分を組み立てる
};

改善案はこんな感じ。


jQuery(document).ready(
  function() {
    switch_video(); // 動画表示部分を組み立てる
  }
);

このへんの説明がシンプルで参考になった ⇒ window.onload とjQury(document).ready の違い » 風の吹く丘

jQuery(document).ready というのは jQuery を使わないとしたら、どんなイベントを使っているんだろうと思ってざっくり調べてみたら DOMContentLoaded イベントというのがあるらしい。

onloadイベントは、画像ロードも含んでロードが完了したら呼び出されるメソッド。
DOMContentLoadedイベントは、HTMLの解釈が終わったら呼び出されるメソッドとのこと。
つまり、onloadよりもDOMContentLoadedイベントの方が早く発火するイベントという事です。
jQueryのredyもこのタイミングっぽい（ソースを読んだ限りでは）。

[JavaScript] onloadイベントより早いタイミングで実行されるDOMContentLoadedイベント - YoheiM .NET
window の load イベントに対応するイベントハンドラです。

(中略)

load イベントは文書のローディング工程の終了時に発生します。このイベントが発生した時点で、文書中の全てのオブジェクトは DOM 内にあり、全ての画像とサブフレームのロードは完了しています。

DOMContentLoaded や DOMFrameContentLoaded のような Gecko で定められた DOM イベント (※element.addEventListener() でハンドリング可能) もありますが、これらは他のリソースのロード完了を待たずに発生するものです。つまり、 window.onload より先に発生します。

window.onload - Web API インターフェイス | MDN
DOMがロードされて操作・解析が可能になったタイミングで関数を実行します。

これはおそらく、最も重要なイベントになります。殆ど全てのJavaScriptはDOMの準備が出来たタイミングで処理を実行したいと思いますが、 window.onloadでは画像などのロードが済む時点にタイミングを合わせるブラウザもあります。readyイベントを用いることで、アプリケーションの体感処理速度を大きく向上させることができます。

ready関数にコールバック関数を渡してやります。コールバック関数の引数に$エイリアスが来るので、これを用いることでグローバル名前空間での衝突を避けた安全なコードを書くことが出来ます。

この関数を使う場合、bodyのonloadイベントには何も書かないようにしてください。readyイベントが実行されなくなってしまいます。

$(document).readyを用いてもかまいません。複数の関数を登録した場合、登録した順に実行されます。

ready(fn) - jQuery 日本語リファレンス

いままで BuzzTube では jQuery を使っていなかったけど、これを機に導入。

tags: buzztube javascript

Posted by NI-Lab. (@nilab)