読者です 読者をやめる 読者になる 読者になる

はてなスターの JavaScript が圧縮すらされていないことにがっかり

Hatena

はてなスターってなぜか、はてな内のサービスについても Ajax ロードによるプラグイン的実装で、明らかに最速な処理になってません。
どう考えてもサーバサイドでそのまま HTML 出力した方が高速なワケで、☆にマウスホバーしたときに改めて付けた方の id やサムネイルを Ajax でロードする程度がちょうど良いと思います。
さらに Firebug で実装見てたら、http://s.hatena.ne.jp/js/HatenaStar.js が毎回ロードされるわけですが、なんと圧縮されていないのです。
確かに読みやすいです。Ten というユーティリティの実装とか理解できます。ファイルの末尾には、はてなスターのサイトへの追加方法なども書かれています。情報公開という観点からはよろしいと思います。でもこうやって見てる人は僅かです。
しかし HatenaStar.js は明らかに今はてなの HTTP サーバで最もリクエストされるファイルの1つです。そして、ブラウザ側つまりクライアントの CPU を使っているわけで、当然のこととして圧縮はすべきです。ディストリビュートするときに compress ツールを介すようにすればいいだけですから。
ドキュメントについては、ファイルの先頭に参照先 URL を書けば十分で、ソースを見せたいならそこに非圧縮ソースを掲載すればよいのです。
ちょうど、こういう話

http://q.hatena.ne.jp/1209612288

があったので乗っかってみました。
Google Analytics の ga.js は、もちろん圧縮されてます。


(--- 以下、2008/05/04 追記 ---------------------------------------)
コメントをいただいたので圧縮するメリットについて補足。
ファイルサイズが小さくなると、それによってダウンロード時間とファイル読み込み時間が短縮されます。
そしてスペースや改行を無駄な無くし変数名が短ければ、それだけインタプリタの解析が楽になります。これはインタプリタを実装しようと考えればわかると思います。
ファイルを読み込んで1文字ずつループして確認していく処理を繰り返すわけですが、サイズが減れば繰り返し数が減るわけです。変数名が短ければ抽出にかかるステップも減ります。
これらによって劇的に速くなることはないでしょう。それでも数世代前の PC を使ってられる方には効果があるかと。今回のエントリは、 HatenaStar.js がロード回数が非常に多いファイルだからです。

ちなみに YUI Compressor を使って、HatenaStar.js を圧縮してみたところ、
 圧縮前 89.4 KB ⇒ 圧縮後 49.4 KB
と半分になりました。前述した解析ループ回数も約50000は減るわけです。
さらに gzip それぞれしたときのサイズは
 単に gzip は 17.8 KB,YUI Compressor + gzip は 13.2 KB
となりました。

テストしてみました

試すのが遅くなりましたが、Windows 2000 (PentiumIV 1.6GHz) の IE6 で下記のテスト HTML と上記の二つの js ファイルをそれぞれ読み込ませてみました。

<html>
<body>
<div class="entry">
 <h3 class="title">Test</h3>
 <a class="permalink" href="#test">Link</a>
</div>
<script type="text/javascript">
var stime = new Date().getTime();
</script>
<script type="text/javascript>
    Hatena.Star.SiteConfig = {
      entryNodes: {
        'div.entry': {
          uri: 'a.permalink',
          title: 'h3.title',
          container: 'h3.title'
        }
      }
    };
</script>
<script type="text/javascript" src="HatenaStar.js"></script>
<p><script type="text/javascript">
var etime = new Date().getTime();
document.write(etime - stime);
</script></p>
</body>
</html>

これを20回ロード試行したときの結果は、
平均が 圧縮前: 108.65(ミリ秒)で圧縮後: 63.25(ミリ秒)でした。
メインで使ってる Core 2 Duo 機では差はなかったです。古い世代の PC を無視するならどうでもいい話かもしれません。iGoogle とかはさらに辛いでしょうね。でも最適化できるところはしてほしいという意見です。もっとも最初に書いたように本来はサーバサイドでやるものだと思います。