和田憲幸のブログ

jqueryをご利用の方はreadyを利用している方も多いのでは無いでしょうか。onloadとreadyは同じように振る舞いますが、実は全然違うんですよね。onloadが「ページ読み込み完了後」に実行されるのに対してjquerのreadyは「DOMツリーが操作可能になったタイミング」で実行されます。体感的にはreadyの方が早い感じ。まぁわかりやすく言うならbodyの閉じタグの直前に実行されるのがreadyと捉えてまず間違いは無いでしょう。

なぜreadyが必要なのか

ではなぜreadyという要素が必用なのか。それは「onloadイベントまでたどり着くのに時間がかかるWebサイトが多いため」という由々しき現状があったりします。それは画像の読み込みなどは勿論なのですが、各種ソーシャル用ライブラリ等々の読み込みに時間がかかるため、onloadを待っていると日が暮れると言い換える事もできます（場合によってはonloadイベントに辿りつけないことも…）。

つまりonloadまでスムーズに辿りつけないWebページには問題があると言っても過言ではないと私は思うんですね。「付加要素に関してはむしろonload後にやれよ」と思うわけです。マッシュアップやWebAPI、ソーシャルガジェットが跋扈する中でWebページ本来の価値である「Webページそのもののユーザエクスペリエンス」が軽視されるようになったなと私は常々感じています。

まぁそんなこともあって、いまWebsiteToolKit.jsを作っているのですが。軽量・高速レスポンスを実現するというのはWebサイトをデザイン（設計）する上で重要なことだと思うんですよね。まぁこんな事を書くのも過去に本ブログで高速化した時に想像以上にQuickになったためなんですが。

WebsiteToolKit.jsの進捗状況

デバッグビューを付けた。configでtrueの場合はsyslogとスクリプトエラーを確認できるようにね。あとjqueryとは異なりますがreadyイベントを実装。話せば長くなるのですが「良い感じ」のタイミングで実行されるやつですね。あとはonloadとコンフリクトしないためのloadイベントも付けた。

jqueryはパワフルで便利で強力だけど、やはりある程度は自分自身で掌握したいという気持ちがどこかにあるのでjqueryが好きじゃないのかもしれないなぁ。すごく便利なんですけどね。目指せ脱jquery。