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)