[Javascript] Javascriptを高速に起動する3つのコツ

こんばんは。
なんとかリリースをくぐり抜けたっぽいおじいさんです。
一安心。これでダメだったら、旅に出ようかと思っていたぐらいです、ハイ。
さて、今日のお題は突然昔の上司がやってきて、「Javascriptの読み込みが遅くてタマラン」とのたまっていたので、おじいさんが知っているコツをいくつか挙げておきます。


0.Apacheの設定を見直しておく


とりあえず、最初にこれぐらいはやっておきましょう。

 ・KeepAlive ON
 ・Expireの設定、ETagとか。

ここで、下手にExpireを設定しちゃうと、Javascriptファイルをバージョンアップした時にどうするの?と言われますが、Javascriptのアクセス方法を、<script src="hogehoge.js?VERSION" />みたいな形で、ファイル名の後ろにバージョン番号をつけます。
もちろん、バージョン番号とファイルの更新がずれる場合があるので、さらに別のIDを振ってもかまいません。こういう風にしておくと、後で強制的にバージョンアップしても対応できます。

ただし、時々変なプロキシがいて、この機構でも無理な場合があります。なので、サーバ側と通信を行った際に、ちゃんとバージョンチェックをしておきましょう。そして、バージョンが違う場合は、警告を出してキャッシュをクリアしてもらう必要があります。


1.Javascirptファイルをgz圧縮しておく


たぶん、何よりこれが一番利くんじゃないかと思います。

まず、JSファイルをgzip圧縮しておきます。これを、同じディレクトリに入れておく。
gzip圧縮を受け付けるブラウザの場合は、gzip圧縮した方を返すというやり方です。
deflate圧縮ではなくて、最初から用意しておく、というのもポイントです。こうしないと、サーバ側のCPU資源を食ってしまいます。

jsか.js.gzのどちらを返却するかをどう制御するかですが、MultiViewを使うか、mod_rewriteを使う事になります。
参考までに、mod_rewriteであれば、以下になります。

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} !.gz$
RewriteCond %{REQUEST_FILENAME}.gz -s
RewriteRule .+ %{REQUEST_URI}.gz


ちゃんとさまざまなブラウザ、HTTP1.1,1.0を試してみて下さい。
時々、Content-Encodingの問題でgzをちゃんと読めなくなっている可能性があります。そういう時は無理矢理にForceTypeなどのディレクティブでjavascriptと設定してやる必要があります。
要テストですよ。


2.javascriptの読み込みブロックを回避する


Scriptタグがあると、そこで読み込みが止まってしまう事はよく知られた事実です。
これはマイコミジャーナルの記事が詳しい。

 http://journal.mycom.co.jp/news/2008/07/25/006/index.html

まあ、おじいさんのやってるプロジェクトでは、とりえずHTMLだけで表示させた後に、XMLHttpRequestで非同期にJavascriptを読み込んで、裏側でごりごり表示を組み立てるという別次元の方法でやっとりますが。



3.javascriptそのものを小さくする


そもそも、gz圧縮する前に小さくしておけよ、というハナシがあるわけです。
有名どころは、YUI Compressorですかねえ。

 http://phpspot.org/blog/archives/2007/08/yahoojavascript.html
 http://phpspot.org/blog/archives/2006/09/javascript_25.html

あと、余談ですがファイルを結合してそもそも数を減らしておくのはよい手段です。KeepAliveがONに出来ない環境では劇的に利きます。


以上、かんたんながら、おじいさんの知っているコツを紹介しました。
他にも色々あるんじゃないかと思いますが、この辺を押さえておけばむやみやたらに遅くならないとは思います。
これでもダメって時はそもそもの設計というか、ライブラリ読み込みすぎじゃね?というハナシになるかと。。。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 1

なるほど(納得、参考になった、ヘー)

この記事へのコメント

この記事へのトラックバック