2016/09/13
JavaScriptが25倍高速に！ ～Issue Editor for JIRA 開発日記～
Author
阿部 賢一Kenichi Abe
こんにちは。 Issue Editor for JIRA 開発メンバーの阿部です。
今日は私達が開発した、Issue Editor for JIRA で実施したパフォーマンスチューニングについて書いてみます。チューニングの結果、処理が 25 倍高速になりました。
Issue Editor for JIRA とは、リックソフトが自社開発したJIRA のアドオンで、10,000件の JIRA の課題をダウンロードし、JIRAサーバ、DBサーバに負荷を掛けずに自由自在にソート・フィルタリング・コピー＆ペーストを行うことができます。
ほぼクライアント側に閉じたアプリケーションなので、軽快な動作となるかはJavaScriptのパフォーマンスに掛かっていると言えます。
製品プロトタイプでは10,000件のソートに50秒も掛かってしまう問題がありました。
今回はブラウザに搭載されているプロファイラを使って、JavaScriptコードの性能を改善してみます。
やみくもに最適化を施すと、なかなか効果が現れない上にデグレを生んでしまいます。
有名な80/20の法則（パレートの法則）によると、プログラムの処理にかかる時間の80%はコード全体の20%の部分が占めることが経験的にわかっています。
無料で使えるChromeブラウザに搭載されているプロファイラを使ってこの20%のボトルネックを見つけてみましょう。
Chrome開発者画面のプロファイラを開き、計測開始ボタンを押した後に “Issue Editor for JIRA”のソートを実行してみます。
実行後に計測終了ボタンを押します。これだけで計測は終わりです。
(プロファイラ実行画面：「Record JavaScript CPU Profile」を選択してから「Start」ボタンを押します）
計測が終わってしばらくすると、プロファイル結果解析画面が表示されます。
プルダウンメニューで「Tree(Top Down)」を選択し、「Total Time」を降順にソートします。
ツリーを展開していきしばらく眺めた結果、ソート処理そのものでなく、アプリケーションで使っていない機能に関する後処理が処理時間の大半を占めていることがわかりました。
計測開始からここまででたったの３分です。
(プロファイル結果解析画面：ツリーのノードはキーボードで開閉できます）
発見した3つのボトルネックを解消した結果、アルゴリズム変更など面倒な作業を行うことなく、50秒掛かっていたソート処理が2秒に縮まりました。
本当かどうかは、 Issue Editor for JIRA をインストールして確かめてみてください*1。
*1: ソート処理の時間は、カラムの種類、クライアントマシンの性能によって変化します