jqueryのpackedバージョンは読み込みに(80msくらい)時間がかかる

先日The JUI 2008 Tokyoに参加させていただいて、その中でGreasemonkeyの中で使うならjQueryが便利だよ！というLightning Talkを聞きました。たぶんその発表をされていた内山さんが以前に書かれたWe Ain't Seen Nothin' Yet. : GreasemonkeyスクリプトにjQueryを読み込む汎用スクリプトを今朝読んでXPCNativeWrapperがあるのでグローバルのネームスペースにいろいろ設定したりするほかのライブラリだと使いにくいというのもあるのを知りました。

コードの評価にどれくらい時間がかかるのか

自分も以前にMochiKitの非同期処理をラップしてくれるDefferedを使いたくてMochiKitをまるまるスクリプトの中に入れて使ったことがありました。そのときMochiKitをまるまるいれたら読み込むのに100msくらいかかるようになった印象があったので、実際どれくらい時間がかかるのか測ってました。ライブラリ本体がブラウザのメモリキャッシュに入っている状態で、ライブラリ本体を読み込むscriptタグの前と後とでFirebugの機能であるconsole.time()/console.timeEnd()を使って時間を計りました。

<html>
<head>
<script type="text/javascript" charset="utf-8">
console.time("t");
</script>
<script type="text/javascript" charset="utf-8" src="./jquery-1.2.5.js"></script>
<script type="text/javascript" charset="utf-8">
var t = console.timeEnd("t");

var s = globalStorage['localhost'];
s.n = s.n ? parseInt(s.n) +1 : 1;
s.sum = s.sum ? parseInt(s.sum) +t : t;
console.log(s);

</script>
</head>
<body></body>
</html>

何回もリロードして値の平均を取ったりするときは、いまのところFirefoxにしか実装されていませんがDOM:Storage - MDCを使って記憶しておくとページをリロードした後でもDOMストレージから同じ値をjavascriptのオブジェクトとして読み出せるので便利です。Firefox2から実装されています。

評価結果

scriptタグの読み込みオーバーヘッドを知るために、dataスキームを用いて空のjavascriptも評価させました。環境は2.16GHz Intel Core2Duo OSX10.5.2+Firefox3RC1です。

ライブラリ名	ファイルサイズ	実行時間(20回の平均)
data:text/javascript;base64,	0	24.9ms
jquery-1.2.5.js	98k	25.1ms
jquery-1.2.5-packed.js	31k	108.3ms
MochiKit.js(1.3.1 packed version)	111k	112.8ms
prototype-1.6.0.2.js	124k	118.5ms

結果からはjQueryの初期化処理がとても速いことがわかります。(オーバーヘッドを差し引くとほとんど0msで処理が終わっているのは、わりと測定値がばらついたので20回の計測だと誤差の範囲内に実行時間が収まってしまったからです。jQueryの本体のはじめと終わりで測ってみたら4ms程度でした)。

ファイルサイズを小さくするために中身がこんな


eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCh
arCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function
(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e
(c)+'\\b','g'),k[c]);return p}('(G(){I w=19.4G,3k$=19.$;I D=19.4G=19.$=G(a,b){H 2t D.16.5r(a,b)};I
 u=/^[^<]*(<(.|\\s)+>)[^>]*$|^#(\\w+)

ふうに圧縮されているjQueryのpackedバージョンはevalしているのが災いしてなのか、ファイルサイズは1/3なのに実行時間はふつうのjQueryにくらべて80msくらい長くなってしまって、ほかのライブラリと同じくらい読み込みに時間がかかっていました。

まとめ

ページをロードするたびに毎回実行されるGreasemonkeyスクリプトの中で使用するなら、読み込みが圧倒的に速いjQueryが適しています。jQuery-packedはファイルサイズは小さいですが、読み込みは80msくらい遅くなってしまいます。Greasemonkeyスクリプトや、ブラウザキャッシュに永続的に残る設定でjQueryを使うのならpackedでないバージョンのほうが読み込み処理が速くなります。

追記 2008.5.23

Twitter / 文殊堂: @ku minifiedバージョンの方を使うべし＞jQ...でminifiedバージョン(改行やインデント等の不要なスペースを削っただけのもの)があるのを教えていただいたので、試してみました。通常バージョンと同じくらいの時間(4~5ms)で読み込まれてファイルサイズも少し小さい(51k)ので、Greasemonkey等に組み込むならminifiedバージョンが最適です。