HOME  >  スポンサー広告 >  プログラミング >  Vichrome の f-Mode (hit a hint) の高速化にチャレンジ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--/--/-- | カテゴリ:スポンサー広告 | トラックバック(-) | コメント(-)

Vichrome の f-Mode (hit a hint) の高速化にチャレンジ

Vichrome の f-Mode (hit a hint) の起動がとても遅い場合があったので、
高速化にチャレンジしてみました。

結論から言ってしまえば、createHints関数が遅いです。
酷い場合だと、処理時間の約 9 割をその関数が占めていました。

対処すると、サイトにもよりますが、 7 〜 20 倍くらい速くなる場合があります。
(1100ms ぐらいかかっていたのが 66ms になったりします)
# ただし、高速化の代償として、設定に関係なく、起動時のアニメーション処理は必ず無効になります。

遅い原因

createHints関数の遅い箇所ですが、
ざっくり記述すると、以下のような構造になっています。
for(...){
  ...
  hintElement.hide();
  hintElement.show();
  ...
}
この一要素ずつヒントを作成している箇所で、
hide()show() を実行しているのが遅い原因です。

ソースを見たかぎりだと
アニメーション処理のため、こんなことをしているみたいです。

高速化の方法

高速化はhide()show()を消すだけで終わりです。
(実際のソースだとshow()showFunc()内で行なわれているので、その呼び出しを削除します)
Windows の場合
C:\Users\[ユーザ名]\AppData\Local\Google\Chrome\User Data\Default\Extensions\gghkfhpblkcmlkmpcpgaajbbiikbhpdi\0.12.0_0\mode.js

Mac の場合
~/Library/Application Support/Google/Chrome/Default/Extensions/gghkfhpblkcmlkmpcpgaajbbiikbhpdi/0.12.0_0/mode.js
※バージョン等は環境依存なので、各自で読みかえてください。

下記の 16、20 行目が修正する箇所です。
      for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) {
        hint = _ref[_j];
        offset = hint.target._offset_;
        top = offset.top - 7;
        left = offset.left - 7;
        if (top < 0) {
          top = 0;
        }
        if (left < 0) {
          left = 0;
        }
        elem = tmpElem.clone().css("top", top).css("left", left);
        _ref1 = hint.key;
        for (_k = 0, _len2 = _ref1.length; _k < _len2; _k++) {
          c = _ref1[_k];
          elem = elem.append($('<span id="vichromehintchar" />').html(c)).css("color", g.model.getSetting("hintColor")).hide();
        }
        hint.elem = elem;
        $('html').append(hint.elem);
        _results.push(this.showFunc.call(hint.elem));
      }
      for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) {
        hint = _ref[_j];
        offset = hint.target._offset_;
        top = offset.top - 7;
        left = offset.left - 7;
        if (top < 0) {
          top = 0;
        }
        if (left < 0) {
          left = 0;
        }
        elem = tmpElem.clone().css("top", top).css("left", left);
        _ref1 = hint.key;
        for (_k = 0, _len2 = _ref1.length; _k < _len2; _k++) {
          c = _ref1[_k];
          elem = elem.append($('<span id="vichromehintchar" />').html(c)).css("color", g.model.getSetting("hintColor"));
        }
        hint.elem = elem;
        $('html').append(hint.elem);
        _results.push(hint.elem);
      }
※修正したソースの配布はしません。Vichrome のライセンスがわからないので……。
高速化したい方は各自ソースを編集してください。
ソース編集後は、 Chrome を再起動すれば修正が反映されます。
(他にも反映する方法はありますが、これが一番手軽だと思います)

高速化した結果

遅いと感じていたページで実行してみたところ、
だいたい 7 〜 20 倍程度の高速化に成功

計測したページ: https://github.com/u338steven
ヒントの数: 31
before : 352 ms
after : 51.3 ms

計測したページ: https://github.com/u338steven/ViChrome
ヒントの数: 69
before : 975 ms
after : 99.3 ms

計測したページ: https://twitter.com/u338steven
ヒントの数: 37
before : 1131.7 ms
after : 66.3 ms

before :修正前の createHints 関数の平均処理時間
after :修正後の createHints 関数の平均処理時間
2014/06/04 | カテゴリ:プログラミング | トラックバック(0) | コメント(0)
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL
http://uisteven.blog.fc2.com/tb.php/60-ce75d84e

外部リンク

カンパのお願い
公開しているソフトウェアはフリーウェアなので無料でご利用いただけます。 気に入ってくださった方は、Amazon でお買い物をする際に下記のリンクを経由して頂ければ励みになります。

検索BOX・タグ一覧
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。