Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Webアプリで起きるクライアントサイドの性能劣化パターンとその改善チューニング

性能改善ノウハウを現場から直送! NTTデータのよりぬき『週刊まかせいのう』 第4回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

本連載は、パフォーマンスを主な対象としてシステム開発・運用の改善や設計を行うNTTデータのコンサルタントチーム「まかせいのう」のメンバーが、業務での体験やそこから得た知見を共有する『週刊まかせいのう』の記事を編集し転載するものです。今回は、クライアントサイド(Webブラウザ)の処理性能を劣化させるパターンと、それを改善し性能を向上させるチューニング方法を紹介します。

目次

遅延原因がクライアント側にある場合の2つのパターン

いわゆる「性能が出ない」「画面がもっさりして処理が遅い」という性能問題が発生した場合、必ずどこかに遅延を発生させているコンポーネント、いわゆる「ボトルネック」が存在します。それはWebサーバであったり、DBサーバであったり、はたまたネットワークやストレージであったりします。

一般的に、こうした遅延箇所の多くはサーバサイドに集中しています。サーバサイドでは、多くのユーザリクエストを受け付け、また大量のデータを処理しているわけですから、これ自体は不思議な話ではありません。

しかし、割合としては小さいものの、ときおりクライアントサイドで性能問題が発生することがあります。クライアントは、ノートPCであったりタブレット端末であったり、スペックもブラウザもバラバラという実行環境は不統一であるものの、遅延原因はほぼ次の2つのパターンに絞られます。

  1. リッチな画面を作るため、Ajaxやマウスオーバーイベントを多用するなど、JavaScriptで重い処理を実装している
  2. 静的コンテンツ量が多すぎて、ネットワーク転送に時間がかかる

1. は、クライアント上で負荷の高い処理を実装してしまい、CPUの処理能力が追いつかない場合に発生します。ユーザフレンドリなUI設計を行おうと、よかれと思ってやったことが裏目に出てしまうわけです。ブラウザによってもJavaScriptの処理能力には差があるため、同じ端末上であってもブラウザを変えただけで遅延が発生することがあります。

2. は、厳密にはクライアントとサーバの間に存在するネットワーク帯域の問題であるため、クライアントサイドの問題と呼ぶには語弊のあるケースもあるのですが、「非サーバサイド」ということで、クライアントサイドの問題として認識されることが多いです。ただし、この場合の解決策としてはサーバサイドに踏み込んだ対処が必要になることもあります。

本稿では、これら2つの遅延原因についての改善策をご紹介します。

クライアントサイドにおける遅延箇所の特定方法

性能問題の解析ステップは、サーバサイドであれクライアントサイドであれ、変わりありません。まず最初にやるべきことは、「どこが遅いのか」を切り分け、その箇所が「なぜ遅いのか」を把握することです。

こうした切り分けを行うためには、処理時間の内訳を明らかにする必要があります。このためのツールには、次のようなものがあります。いずれも無償で利用可能です。

これらのツールは、処理の内訳を次の画像のように可視化してくれるため、何の処理に時間がかかっているのか直観的に把握しやすく、非常に便利です。

画像1-1:Dynatrace Ajax Editionで「楽天市場」のトップページへアクセスしたときのタイムライン。画面描画が完了するまでの処理シーケンスを一覧できる。
画像1-1:Dynatrace Ajax Editionで「楽天市場」のトップページへアクセスしたときのタイムライン。画面描画が完了するまでの処理シーケンスを一覧できる。
画像1-2:Dynatrace Ajax Editionで「楽天市場」のトップページへアクセスしたときのホットスポット(最も時間を要する処理のランキング)。innerHTMLのDOM操作に最も時間を費やしていることがわかる。
画像1-2:Dynatrace Ajax Editionで「楽天市場」のトップページへアクセスしたときのホットスポット(最も時間を要する処理のランキング)。innerHTMLのDOM操作に最も時間を費やしていることがわかる。

JavaScriptのチューニングポイント

クライアントサイドで遅延が発生する場合、その大半にはJavaScriptが関係しています。JavaScriptのコードで大量のループを実行したりすると、CPU使用率が100%に張り付き、数十秒~数分間の間、ブラウザが無応答になってしまうこともあります。

一般に、クライアントのハードウェア性能はサーバに比べれば格段に低く、またバラツキがあります。あるユーザは数十万円する最新モデルのCPUを搭載したデスクトップPCを使っているかと思えば、別のユーザは型落ちの中古ノートPCを使っていたりします。これでは、同じプログラムであっても実行時間に雲泥の差が出るのは当然のことです。かつ、JavaScriptはシングルスレッドでしか動作しないため、マルチコアCPUの恩恵を受けられないこともCPUネックの一因となっています。

画面2は、Dynatrace AJAX EditionでクライアントのCPU負荷を表示している様子です。このような専用ツールを使わなくとも、CPUネックの状態は、Windowsであれば標準で付属している性能監視ツール「パフォーマンスモニター」で把握することができますし、もっとお手軽に「タスクマネージャー」でリアルタイムに見ることもできます。

画面2:CPUが100%に張り付いていることが見て取れる
画面2:CPUが100%に張り付いていることが見て取れる

そのため、クライアントサイドの性能問題を解決するには、「新しいPCを買う」とか「使うブラウザを変える(特にInternet Explorerを使わない)」という選択が最もコストパフォーマンスの高い対策だったりします(身も蓋もない話で恐縮です)。ただ、お客様に向かって「新しいPC買ってください」と笑顔でお願いするのは憚られる空気であることも多いと思います。そのようなケースに備えて、次ページからは、JavaScriptの性能問題を避けるための基本的なチューニングポイントを6つ紹介します。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:性能改善ノウハウを現場から直送! NTTデータのよりぬき『週刊まかせいのう』

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5