遅延原因がクライアント側にある場合の2つのパターン
いわゆる「性能が出ない」「画面がもっさりして処理が遅い」という性能問題が発生した場合、必ずどこかに遅延を発生させているコンポーネント、いわゆる「ボトルネック」が存在します。それはWebサーバであったり、DBサーバであったり、はたまたネットワークやストレージであったりします。
一般的に、こうした遅延箇所の多くはサーバサイドに集中しています。サーバサイドでは、多くのユーザリクエストを受け付け、また大量のデータを処理しているわけですから、これ自体は不思議な話ではありません。
しかし、割合としては小さいものの、ときおりクライアントサイドで性能問題が発生することがあります。クライアントは、ノートPCであったりタブレット端末であったり、スペックもブラウザもバラバラという実行環境は不統一であるものの、遅延原因はほぼ次の2つのパターンに絞られます。
- リッチな画面を作るため、Ajaxやマウスオーバーイベントを多用するなど、JavaScriptで重い処理を実装している
-
静的コンテンツ量が多すぎて、ネットワーク転送に時間がかかる
1. は、クライアント上で負荷の高い処理を実装してしまい、CPUの処理能力が追いつかない場合に発生します。ユーザフレンドリなUI設計を行おうと、よかれと思ってやったことが裏目に出てしまうわけです。ブラウザによってもJavaScriptの処理能力には差があるため、同じ端末上であってもブラウザを変えただけで遅延が発生することがあります。
2. は、厳密にはクライアントとサーバの間に存在するネットワーク帯域の問題であるため、クライアントサイドの問題と呼ぶには語弊のあるケースもあるのですが、「非サーバサイド」ということで、クライアントサイドの問題として認識されることが多いです。ただし、この場合の解決策としてはサーバサイドに踏み込んだ対処が必要になることもあります。
本稿では、これら2つの遅延原因についての改善策をご紹介します。
クライアントサイドにおける遅延箇所の特定方法
性能問題の解析ステップは、サーバサイドであれクライアントサイドであれ、変わりありません。まず最初にやるべきことは、「どこが遅いのか」を切り分け、その箇所が「なぜ遅いのか」を把握することです。
こうした切り分けを行うためには、処理時間の内訳を明らかにする必要があります。このためのツールには、次のようなものがあります。いずれも無償で利用可能です。
- Dynatrace AJAX Edition：Internet ExplorerとFirefoxで利用できるクライアントのプロファイラ。
- Firebug：Firefoxの開発者ツール。
- Chrome DevTools：Chromeの開発者ツール。
これらのツールは、処理の内訳を次の画像のように可視化してくれるため、何の処理に時間がかかっているのか直観的に把握しやすく、非常に便利です。
JavaScriptのチューニングポイント
クライアントサイドで遅延が発生する場合、その大半にはJavaScriptが関係しています。JavaScriptのコードで大量のループを実行したりすると、CPU使用率が100％に張り付き、数十秒～数分間の間、ブラウザが無応答になってしまうこともあります。
一般に、クライアントのハードウェア性能はサーバに比べれば格段に低く、またバラツキがあります。あるユーザは数十万円する最新モデルのCPUを搭載したデスクトップPCを使っているかと思えば、別のユーザは型落ちの中古ノートPCを使っていたりします。これでは、同じプログラムであっても実行時間に雲泥の差が出るのは当然のことです。かつ、JavaScriptはシングルスレッドでしか動作しないため、マルチコアCPUの恩恵を受けられないこともCPUネックの一因となっています。
画面2は、Dynatrace AJAX EditionでクライアントのCPU負荷を表示している様子です。このような専用ツールを使わなくとも、CPUネックの状態は、Windowsであれば標準で付属している性能監視ツール「パフォーマンスモニター」で把握することができますし、もっとお手軽に「タスクマネージャー」でリアルタイムに見ることもできます。
そのため、クライアントサイドの性能問題を解決するには、「新しいPCを買う」とか「使うブラウザを変える（特にInternet Explorerを使わない）」という選択が最もコストパフォーマンスの高い対策だったりします（身も蓋もない話で恐縮です）。ただ、お客様に向かって「新しいPC買ってください」と笑顔でお願いするのは憚られる空気であることも多いと思います。そのようなケースに備えて、次ページからは、JavaScriptの性能問題を避けるための基本的なチューニングポイントを6つ紹介します。
