○○のコンテンツの JavaScript を高速化する

はじめに

○○はとっても便利になったのですが、若干 JavaScript に時間が掛かっているみたいです。

というわけで

調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。

この日記は調査しながら、過程を書いていくつもりです。

準備

まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。

作業用ディレクトリを作る

とりあえず、ホームに hogeJS というディレクトリを作ります。

$ mkdir hogeJS
$ cd hogeJS

CocProxy をダウンロードしてくる

以下から CocProxy というツールをダウンロードしてきます。

http://coderepos.org/share/wiki/CocProxy

$ wget http://svn.coderepos.org/share/lang/ruby/cocproxy/proxy.rb

CocProxy は id:cho45 が作った超絶便利ツールです。

ローカルに Proxy サーバーを立ち上げて、 Web サーバからの応答をローカルのファイルの内容に差し替えることができます。

CocProxy で差し替えるファイル用のディレクトリを作る

CocProxy は、 proxy.rb と同じディレクトリ内にある files サブディレクトリ内にファイルを置いておけば、自動で応答を差し替えてくれるようになります。

$ mkdir files

○○で使っている以下の JavaScript をダウンロード

○○ページで使っている JavaScript をダウンロードして、 files ディレクトリ内に入れます。

$ cd files
$ wget http：／／hoge.jp/js/hoge.js
$ cd ..

今のところ作業ディレクトリ内は以下のような感じです。

$ tree
.
|-- files
|   |-- hoge.js
`-- proxy.rb

1 directory, 1 files

CocProxy を起動して、ブラウザのプロキシを設定する

ruby で proxy.rb を起動します。以下のように、表示されます。

$ ruby proxy.rb 
Use default configuration.
Port : 5432
Dir  : files/
Cache: true
Rules:
    1. #{File.basename(req.path_info)}
    2. #{req.host}#{req.path_info}
    3. #{req.host}/#{File.basename(req.path_info)}
    4. .#{req.path_info}

これが完了したら localhost:5432 にプロキシサーバが立ち上がっているので、ブラウザに設定します。

準備完了

これで準備完了です。

あとは files ディレクトリ内のファイルを、書き換えればその結果をブラウザ上で確認できるようになります。

(中略)

まとめ

結局、一番効果があったのは、以下の〜つでした。

* うんたら
* かんたら

これで倍近く速くなりました。

結局、 Firefox の場合はふにゃふにゃ遅い問題が一番のネックになりますね。

感想

○○の JavaScript を触ってみた感想ですが、本当にしっかりと書けているなあと思いました。

僕の挙げたような高速化案はどれも、細かなブラウザ判定が必要な箇所ばかりで将来の「保守性」を犠牲にしてしまう可能性もあります。

きっと、○○ではそのように判断して今のコードになったのではないでしょうか。

via:はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
[長くて改変しきれねぇ][相手を持ち上げて自分も乗っかるメソッド][id:amachangは偉大]

ネットランダム改変

はてなダイアリーからはてなブログにインポート。