前回はView周りのパフォーマンス・チューニングを実施しました。今回はクライアント側、すなわちJavascriptのチューニングを『浅〜く』実施して本トピックを終了したいと思います。
パフォーマンス・チューニング3:Javascript
チューニングを始める前に、rack-mini-profilerで現在のパフォーマンスを確認しておきましょう。
『161.6 ms』と十分なスピードを叩き出していますね。しかし、実はこれはサーバサイド側の処理時間なのです。クライアント側の処理時間は詳細ウインドウの下段に表示されています。
つまり、173msにレスポンスを受け取り → 247msからブラウザで描画を開始し → 418msにDOM構築が完了(DOMContentLoadedイベント発火)、 103ms費やしてJavascriptを処理した・・・ということになります。
チューニングの対象となるのは、もちろんJavascriptを処理している時間『103 ms』です。では一体どんなJavascriptを実行しているのか見てみましょう。『books.js.coffee』と『books/_book.html.erb』のソースを確認します。
📄books.js.coffee
jQuery -> $(".book").on 'click', (event) -> alert "[Description]\n" + @.dataset.description
📄books/_book.html.erb
<div class="book" data-description="<%= book.description %>"> <div class="title"> <%= link_to book.title, "/books/#{book.id}" %> </div> <div class="author"><%= book.author.name %></div> </div>
要するに、本1冊に値するdiv要素をクリックすると、その本の詳細(book.description)をアラート表示するということですね。一応books/indexにアクセスして、動作を確認しておきます。
ちゃんと動いてますね。確認が済んだところで、チューニングに入りたいと思います。
しかし、一体どこをチューニングすればよいのでしょうか?もう一度『books.js.coffee』を見てみましょう。
📄books.js.coffee
jQuery -> $(".book").on 'click', (event) -> alert "[Description]\n" + @.dataset.description
チューニングできるのは2行目です。
まず、jQueryのセレクタで『.book』を指定しています。これは class=”book” となっている要素を全て選択するクラスセレクタですが、クラスセレクタはパフォーマンスが悪いです。通常のページなら気にする必要はありませんが、バリバリにチューニングする必要がある場合は心に留めておかなければなりません。
次に、『.book』クラスを持つ要素の数が多いことが問題です。テストデータは1,000件なので、1,000回イベントの登録処理を行うことになります。
上記2点を解消できる記述に修正します。
📄books.js.coffee
jQuery -> $("#bookshelf").on 'click', ".book", (event) -> alert "[Description]\n" + @.dataset.description
2行目を修正しました。『#bookshelf』はテーブルに割り当てられた id です。この#bookshelfテーブルに対してclickイベントを割り当てて、実際にクリックされた時に子要素の『.book』にイベントをデリゲートします。こうしておけば、高速なIDセレクタを使用できますし、イベントの割り当ても1回で済みます。
また、今回は関係ありませんが、ページをロードしてから動的に.book要素を追加したりする場合にも上手く動作してくれます。初版の書き方だと、新たに追加した .book要素に対し別途clickイベントを割り当てなければなりませんが、修正版だとイベントは親要素に割り当てられているので、その必要はありません。楽チンですね!
それでは、さっそく修正後のパフォーマンスを見てみましょう。
ぬううぅ・・・!
劇的・・・とは言えませんが、僅かながら速くなりましたよ。
今回はデモアプリということで単純な画面にしていますが、複雑なアプリの場合には、こういった小さな積み重ねが大きな結果につながります。今回のJavascriptチューニングは本当に基本中の基本です。Javascript/jQueryのチューニングについては、色んな本やサイトで紹介されています。今後も重要な地位に君臨し続けるであろうJavascrpt様なので、基本はしっかり抑えておきましょう。
ちなみに、オススメの本はこちらです。
これにて、Railsアプリの『浅い』パフォーマンス・チューニングは終了です。本当に基本ばかりでしたが、いずれは『深〜い』内容を書けるように精進します。
今回使用したソースコード
githubに使用したソースコードを置いておきます。試してみたい方はどうぞ。
https://github.com/itmammoth/ome-tuning
タグ「V3_initial」が本記事最初の状態、「V3_pt」がチューニング後の状態です。
関連する記事
- Railsアプリを『浅く』パフォーマンス・チューニングしてみる(その1)
- Railsアプリを『浅く』パフォーマンス・チューニングしてみる(その2)
- simple_formとTwitter bootstrapで作る俺流鉄板Railsアプリ(その1)
- simple_formとTwitter bootstrapで作る俺流鉄板Railsアプリ(その3)
- 自分はこんな感じでRailsアプリを作っております