Sponsored Contents

最新記事

Image credit:
Save

「艦これ」第二期(HTML5)【Block-1】の動作が軽いブラウザーはどれだ選手権:ウェブ情報実験室

本文長いので結果を先にいうと、「Microsoft Edge」です

宮里圭介 (Keisuke Miyasato)
2018年10月20日, 午後06:00
633シェア
36
488
0
109

連載

注目記事

Hue対抗スマート電球がアイリスオーヤマから。無線LAN搭載で3000円台、スマホ接続にハブも不要

Hue対抗スマート電球がアイリスオーヤマから。無線LAN搭載で3000円台、スマホ接続にハブも不要

View
ROG Phone日本上陸か!? ASUSが11月16日にゲーミングスマホの発表会を開催

ROG Phone日本上陸か!? ASUSが11月16日にゲーミングスマホの発表会を開催

View
従来のFlashからHTML5へと移行し、さらに高画質化まで実現した「艦これ」第二期。画面が大きくなったことや滑らかな動作になったことにも慣れてきた頃かと思いますので、ここらでひとつ、ブラウザー別に負荷がどのくらい違うのかを調べてみました。

実験の目的

「艦これ」第二期(HTML5)【Block-1】(以下、「艦これ」)の動作が軽いブラウザーはどれか知りたい

実験の動機

「艦これ」は2013年の4月に始まったブラウザーゲーム。長らくAdobe Flashで動作し、登場時から「え?Flashなの?」とささやかれることも多くありましたが、今年の8月に「第二期」となり、待望のHTML5化、高解像度化、フレームレートの向上などが行なわれ、よりキレイでヌルヌル動くようになりました。

▲HTML5化時のアナウンス。ブラウザーでFlash対応が停止されていく中、無事に移行できてよかったです

しかしいい事ばかりとは限りません。特に気になったのが、PCへの負荷が増えていたこと。さらに実装直後ということで、数々のバグや最適化されていないことによる負荷増大の影響が大きく、放っておくとCPU負荷が起動直後の数倍になっていたり、メモリー使用量が3GB超になっていたりすることもザラでした。そのため、ちょいちょい動かすブラウザーを変えては、負荷が軽くなりそうなものを使うといったことをしていたわけです。

Flashの場合、ブラウザーによる挙動の違いはそれほど大きくない印象がありましたが、HTML5はブラウザーで処理されるため、どうしても差が出てきます。この差によって、軽かったり重かったりの違いが大きくなるかもしれない、と考えての試行錯誤でした。

この負荷の違いをいつかちゃんと検証したいと思っていたのですが、そんな不安定な動作状況のまま運営が放っておくはずもありません。当然のようにちょいちょい改修が入り、そのたびに快適になっていき、検証のタイミングが難しいことになっていました。いや、いいことなんですけどね。▲特にメモリー消費のひどさは把握していたようで、早々に対応する旨のアナウンスがありました

ある程度落ち着いたところでガッツリやろうと見計らっていたのですが、初秋イベントで忙しくなったり、ブラウザーの更新がきたり、OSの更新があったり、艦これ側でさらなる改修が入ったりでタイミングが悪く、なかなか検証できませんでした。

とはいえ、初秋イベントの終わりに近い頃になれば流石に動作も安定してきて、たまに反応がなくなって操作できなくなるといったことはあったものの、長時間放置でもアホみたいにメモリーを食うことはなくなっていました。そんなわけで、初秋イベント終了直前のタイミングで、複数のブラウザーを使って「艦これ」がどの程度の負荷になるのか調べました。

実験対象

うちにあるのがWindows環境なのでOSはWindowsというのは決まっていても、どのブラウザーを使うかでだいぶ悩みました。公式による推奨環境をチェックしてみると

「艦これ」第二期(HTML5) 【推奨環境】
▼Windows環境
【Windows 8以降】Google Chrome / Mozilla Firefox / Microsoft Edge
▼Mac OS環境
【Mac OSX 10.11以降】Google Chrome / Mozilla Firefox / Safari11以上
※上記推奨環境は変更になる事がございます。予めご了承くださいますよう、お願い申し上げます。

となっていますので、まず、この3つのブラウザーは確定です。他にもブラウザーは数多くありますが、レンダリングエンジンまで自作しているところはまずなくて、この3つを押さえておけばまず問題ないかな、といった雰囲気があります。

とはいえ、本当に差がないのかは気になるところ。そんなわけで、メジャーだったり注目だったりする4つのブラウザー(すべてレンダリングエンジンはChromeと同じ)を追加して検証することにしました。対象としたブラウザーとそのバージョンは以下の7つです。

【推奨環境】
【追加検証】
これ以外に有志による専用ブラウザーもあるのですが、そこまで手が回らなかったので見送りました。

実験方法・条件

調べたかったのは、「1.CPU負荷」「2.GPU負荷」「3.メモリー使用量」の大きく3つ。一番の問題だと思っていた長時間連続駆動時のメモリー浪費ですが、これに関しては1時間ほど放置しておくくらいでは以前のように増えることがなかったため、長時間放置後のメモリー使用量比較はやらないことにしました。というか場合によって結果がマチマチなので、比較のしようがないというのが正直なところです。つい最近も、更なる改善についてアナウンスがありましたしね。▲どうでもいいことなんですが、いつのまにやら「「艦これ」第二期(HTML5)【Block-1】」から「「艦これ」2nd Edition【Block-1】」になってますね

比較内容はできるだけ実際に即したものにしようと思い、起動から出撃、終了まで、ひと通りの操作をするというシナリオを考えました。
  • GAME START画面で待つ(10秒)
  • 母港を表示(30秒)
  • 出撃し「完全勝利S」画面で待つ(30秒)
  • 帰投したら補給・編成入れ替えを行ない、母港表示(合計30秒)
  • ブラウザーを最小化して待つ(30秒)
  • 終了(その後10秒待つ)
lab
▲だいたい1周で最短6分ほど。敵編成によって時間や負荷が変わったりもしますが、大きくは変動しないので無視しています

周回したのは安定して完全勝利Sが可能なうえ、海防艦4隻編成で航路が固定される1-5。敵編成はこちらでコントロールできない部分なので諦めましたが、最大保有数まで埋めることで、ドロップ画面が出ないよう工夫しています。また、周回時間がなるべく同じになるよう、可能な限り早くボタンを押すようにしました。

lab
▲編成は海防艦4隻。対潜先制爆雷攻撃でほぼ勝利が確定するので、安定した周回が可能です

主にチェックしたかったポイントは、母港放置時の負荷と、経験上負荷が最大近くになる「完全勝利S」表示時の負荷です。この2つの負荷が低ければ、長時間遊ぶうえで問題となることはないだろうと判断できると考えました。そのため、この部分の負荷影響が多少多めにでるよう、シナリオの中で待ち時間を設定しています。

負荷に関しては最初、タスクマネージャーの画面から適当に読み取ればいいかと思っていたのですが、上記シナリオに沿った負荷を知りたくなったこと、Windowsの更新によりタスクマネージャーで表示される負荷表示が怪しくなったことなどがあり、「HWiNFO」でログを取って調べるという方法に変更しました。

lab
▲CPU負荷などのログを取るのに便利なツール。いつもお世話になっております

ただし、HWiNFOで記録できるのはブラウザー単体での負荷ではなく、システム全体の負荷となってしまいます。ですが、どのブラウザーを使った場合でもその他の負荷は一定と考えられますから、比較には影響しないとみなしました。ちなみに、GPU負荷は「デスクトップ ウィンドウマネージャー」とかいう子が結構な負荷をもっていきます。ブラウザーがGPUを描画に使うときに出てくるものなので、むしろ、これも合算しなければならないものでしょう。そういう意味でも、システム全体の負荷で比較する方が、よりリアルな負荷比較と言えると思います。

テストに使用したのは、CPUに6コア12スレッドの「Core i7-8750H」、GPUに「GeForce GTX 1070」、メモリー16GBを搭載したゲーミングノート。諸事情により機種名は明かせませんが、「艦これ」を遊ぶにはオーバースペックもいいところのPCです。なお、今回ディスクリートGPUは使用しておらず、CPU内蔵のグラフィック機能のみで試しました。無理にでも使ってみたかったのですが、ブラウザーによっては利用が指定できず、条件がそろわなかったため諦めました。

オーバースペックなPCでの検証に意味がないと考える人もいるかと思い、Windowsの「ブート詳細オプション」を変えることで、使用する論理プロセッサ数を絞った場合もテストしました。最大の12だけでなく、8、4、2と設定を変えることで、Core i5相当、Core i3相当、それ未満という性能を疑似的に実現しています。

lab
▲msconfigのブートタブにある「詳細オプション」の画面。プロセッサ数を絞ることで、疑似的に下位モデルのCPU相当の性能としました

lab
▲左は元で、右がプロセッサ数を4に絞ったところ。6コア12スレッドのはずが、2コア4スレッドのCPUとして扱われているのがわかります

長くなってきたので、実験方法と条件を簡単にまとめておきましょう。
  • 試すブラウザーは推奨+αの合計7種類
  • 比較はCPU負荷、GPU負荷、メモリー使用量の大きく3点
  • 特定シーンではなく、シナリオに沿った負荷を見る
  • 負荷はブラウザー単体ではなく、システム全体
  • 設定でプロセッサ数を変えることで、CPUの違うPCに疑似対応
ということで、実験です。

実験1:CPU負荷で比較する

最初にプロセッサ数を変更した場合のCPU負荷(平均)をチェックしていきましょう。ちなみにこのCPU負荷は、シナリオにあるウィンドウの最小化直前までの平均となっています。これは、1つを除くすべてのブラウザーが、ウィンドウを最小化すると描画を止め、CPU負荷もGPU負荷も大きく下がるからです。プレイ中の負荷、という観点から、最小化する直前までの平均としました。

ちなみにプロセッサ数は12、8、4、2の4パターン試したのですが、2の時は完全に処理速度が間に合っておらず、マウスのカーソルは遅れるしクリックの反応は鈍いしでゲームになりませんでした。なので2プロセッサは除外しています。

lab
▲プロセッサ数を12、8、4と変更したときのそれぞれのCPU負荷平均。Microsoft Edgeが最強ですが、プロセッサ数による変動も興味深いものがあります

見ての通り、CPU負荷が低いのはダントツで「Microsoft Edge」(以下、Edge)。12プロセッサの時はまだかわいげのある差でしたが、8プロセッサでは他の半分くらい、4プロセッサではさらに低くなっています。正直、ここまで差がつくとは思っていませんでした。これだけでもう結論にしちゃってもいいのですが、もう少し詳しく見ていきましょうか。

まずは推奨環境となるChrome、Firefox、Edgeを比べてみます。12プロセッサではChromeとFirefoxはほぼ同じでしたが、8プロセッサになると明らかにFirefoxの負荷が高くなり始め、4プロセッサではさらに大きな差となっています。プロセッサ数が減るぶんCPU負荷が高くなるというのは当たり前ですが、どうしてブラウザーによってこうも比率が違うのか不思議なところ。この謎のヒントになりそうなのが、ブラウザーのプロセッサ利用のしかたにクセがあることです。

「完全勝利S」時のプロセッサ利用状況を比べてみたのが、次の図です。

lab
▲左からChrome、Firefox、Edge。すべてのプロセッサをまんべんなく使わず、妙に偏っているのがわかります

Chromeは比較的負荷を上手く分散し、軽めの負荷が複数のプロセッサで実行されている様子がわかります。これに対してFirefoxは特徴的で、高負荷が1つ、そして中負荷が1つといったように、特定のプロセッサに偏る傾向が強く出ています。Edgeはそもそも負荷が低いのでちょっと判断しづらいですが、Chromeほどではないにせよ、Firefoxよりは分散できてるように見えます。

プロセッサ数が多ければ平均されるので負荷が低く見え、プロセッサ数が減れば負荷の高さが露呈しやすくなってくる......というのがFirefoxの負荷が高く見える理由でしょうか。

もうひとつ、シナリオ中のCPU負荷変動をグラフにしたものも見てみましょう。プロセッサ数を12、8、4と変化したときのグラフの特徴が変わっていく様子に注目してください。

lab
▲平均で見ると団子でしたが、一連の変化を見るとちょいちょいFirefoxの負荷が飛び出していることに気づきます

lab
▲プロセッサ数が8になるとFirefoxの変動が顕著になり、かなりの頻度で高負荷状態になっているのがわかります

lab
▲4プロセッサではEdgeの変動も大きくなっています。Chromeは他と比べれば変動は小さいほうです

Firefoxは使用するプロセッサが偏るためか、その数が減ると変動が大きくなりやすい傾向にあるというのがよくわかる結果ではないでしょうか。Chromeも多少動いていますが、うまく分散できているぶん、FirefoxやEdgeより変動が少ないように見えます。

推奨外となる追加検証したブラウザー4種の方へ目を移すと、比較的軽めなOpera、Kinza、負荷の高めなSleipnir、Vivaldiと大きく2つのグループに分けられそうです。Sleipnirはデザイン重視のブラウザー、Vivaldiは機能重視のブラウザーということもあり、順当な結果と言えそうですね。

推奨ブラウザーと同じように、シナリオ中の負荷変動を見てみましょう。傾向はそこそこ似ているので、12プロセッサの場合のみにしておきます。

lab
▲シナリオ全体で、SleipnirとVivaldiの負荷が高めというのがわかるグラフです

注目して欲しいのは最後の部分。ウィンドウを最小化した後も、Vivaldiだけ負荷が高止まりしているのがわかります。他のブラウザーは最小化すればCPU負荷もGPU負荷もかなり低くなるのですが、Vivaldiだけはそうなりません。ブラウザーゲームをながらプレイする場合、起動したまま最小化しておくことが多いだけに、これはマイナス要素と言えそうです。

以上、実験1のCPU負荷に関してザックリと結果をまとめると、
  • Microsoft Edgeがダントツで軽い
  • Chromeは分散処理能力が高め
  • 推奨外ではOperaとKinzaが健闘
  • Vivaldiは最小化しても負荷が高い
といった感じですね。

実験2:GPU負荷で比較する

CPU負荷ではEdgeがダントツでしたが、GPUへの負荷ではこの傾向は変わるのでしょうか。グラフを見れば一目瞭然なので最初に書いてしまいますが、GPU負荷でもEdge最強です。まー、見てくださいよ。

lab
▲Edgeの負荷が他の半分。さすがにここまで軽いと、本当にちゃんと描画しているのか疑い始めてしまいます

「EdgeはGPUが頑張ってるぶんCPU負荷が軽かったんだ!」などという新しい発見はなく、GPU負荷でもEdgeがダントツで軽いという結果です。しかし、ここまで差が付くのがどうにも不思議で、色々考えていると、負荷がちょうど半分くらいだということすら不自然に見えてきます。ちゃんと描画せずに、半分くらい間引いて表示しているのではないか、などと邪推してしまいますが、目で見る限り違和感はなし。たとえ間引かれているとしても問題ないレベルに思えます。私の評価が画質や音質に関してザルなので、あてにならないですけど......。

全ブラウザー共通の話でちょっと面白いのが、プロセッサ数の違いによらずGPU負荷はほぼ同じというところ。変更しているのはプロセッサ数だけで、GPUに関しては何も変えていないため、当然の結果ですが。

もう少し詳しい変動を見てみようと、シナリオ中のGPU負荷をグラフにしてみました。わかりやすいように、まずは推奨ブラウザーから。

lab
▲負荷に大きな違いはありますが、どのブラウザーでもグラフの動きそのもには似ています

前半、負荷が安定している場所が2か所ありますが、最初の方は母港表示、次が完全勝利S時のものです。こうしてみると、Chromeは負荷の変動が大きくメリハリがある感じですが、Firefoxは母港表示の時から負荷が高く、出撃中も高負荷が続いていることがわかります。Edgeは常に50%以下をキープするほど負荷が低いので別格の雰囲気がありますが、変動そのものはChromeとそっくり。高負荷になると間引く、みたいな怪しい動きはなさそうです。

続いて推奨外となる追加検証したブラウザーの動きも見てみましょう。

lab
▲レンダリングエンジンはChromeと同じなので傾向はそっくりですが、意外と負荷に差があります

CPU負荷と同じく、GPU負荷でもOperaとKinzaが軽め、SleipnirとVivaldiが重めという結果です。意外と母港表示時に差があるのだなと、ちょっと感心してしまいました。なお、ウィンドウを最小化したときに負荷が高いままとなるVivaldiの問題ですが、GPU負荷でもガッツリ残っているのがわかりますね。

さて、ここで気になったのが、GPU負荷が100%を超えるような使い方をするとどうなるのか、ということです。そこで、FirefoxとOperaで完全勝利S画面を表示したまま、Chromeで艦これを動かしてみたのですが......画面がガタガタとすることもなく滑らかに表示され、いつも通り問題なく遊べてしまいました。

lab
▲単純な足し算では、2つの完全勝利Sだけでも160%以上。3つの画面で240%は行くはずですが、描画速度への影響は感じられませんでした

タスクマネージャーで確認すると、Firefoxが約21%、Chromeが約27%、Operaが約24%となっており、明らかにブラウザーあたりの負荷率は低くなっていますが、性能に大きな問題があるようには感じません。

詳しくないので完全に想像ですが、負荷が高く見えても待ち時間などが大半で、単純計算で合計が100%を超えるような状況でも処理能力としてはまだまだ余裕がある、みたいなことが起きているのでしょうか。

実際のところはわかりませんが、ひとつ言えそうなのは「艦これでGPU負荷って気にしなくていいんじゃない?」ってこと。なんでしょうかこの、検証しなくてよかったんじゃないか感は。

以上、実験2のGPU負荷に関してザックリと結果をまとめると、
  • Microsoft Edgeがダントツで軽い
  • 艦これではGPU負荷はあまり気にしなくてよさそう
といった感じですね。

実験3:メモリー使用量で比較する

最後の実験はメモリー使用量。システム全体での比較となるとブレが大きくなりがちなので、ブラウザー単体での使用量で比べていきましょう。といっても正確なところはわからないため、システム全体のメモリー使用量を記録し、ブラウザーを終了した直後の使用量を引いたものを、ブラウザーのメモリー使用量としました。

素直に完全終了せず、一部常駐するようなブラウザーだとメモリー使用量が実際よりも少なくなりますので、あくまで「艦これで遊ぶときにブラウザーが使用するメモリー量」という認識です。なお、傾向が大きく変わらなかったため、プロセッサ数は12の時のみ扱っています。

ということで、メモリー使用量の平均と最大とを調べたのが次のグラフです。

lab
▲メモリー使用量は、平均で大体1~1.4GB、最大で1.3~1.7GBくらいになっていました

平均使用量では相変わらずEdgeが強いのですが、最大使用量では推奨外のKinzaの健闘が目立ちます。続いてChromeとOperaあたりが比較的消費量が少ないという結果になっていました。

ちなみにPCに搭載されているメモリーは16GBですが、ブラウザー終了後のメモリー使用量は大体3GB前後となっていました。艦これで遊ぶときは4~5GBくらいの使用量になっていましたので、最低でも8GBは搭載しておく方が無理なく遊べそうですね。もちろん、他のソフトも使うことを考えれば、16GBあると安心ですが。

続いて、シナリオ中の使用量変化も見ていきましょう。まずは推奨の3ブラウザーから。

lab
▲スタートはそれほど差がありませんが、出撃中、そして帰投後の差が激しいのが気になります

開始時はどれも1GBを切っており順調なのですが、問題は出撃してから。いったん使用量が上がるのはどれも同じですが、上がったままで下がりにくく、使用量がジリジリと増えていっているのがFirefoxです。母港に戻った後もあまり下がらず、ウィンドウを最小化しても高止まりしているのが気になります。

ChromeとEdgeは出撃後、完全勝利S画面を過ぎると使用量が減少。その後、戦闘の度に使用量が上下するChromeと、ほとんど動かないEdgeといったように特徴がわかれていました。なお上下動のあるChromeですが、母港に戻った後は落ち着きを取り戻し、特にウィンドウを最小化した後はフラットになるほど素直な動きとなっています。

推奨外となる追加検証したブラウザーのメモリー使用量も見ていきましょう。

lab
▲どれも動きはChromeそっくりで、ベースが同じなんだなと実感しますね

使用量に差こそあれ、基本的な動きはどれも同じ。しかし、最小のKinzaと最大のSleipnirとで、最大約500MBほど使用量に差があるというのが面白いです。メモリー使用量でも、CPUやGPUと同じくOpera、Kinzaが比較的軽め、SleipnirとVivaldiが重ためという傾向は同じようです。

以上、実験3のメモリー使用量に関してザックリと結果をまとめると、
  • Microsoft EdgeとKinzaが軽め
  • Firefoxはメモリー開放タイミングが遅そう
といった感じです。

結論・まとめ

ということで実験結果をふまえ、結論っぽいことを導くと、
  • 「艦これ」第二期(HTML5)【Block-1】の動作が軽いのは「Microsoft Edge」
  • 推奨外のブラウザーで比較的軽いのは「Opera」「Kinza」
といったところでしょうか。

とはいえ負荷の強弱はあるにしても、基本的にCPUが2コア4スレッド以上(Core i3相当以上)、メモリー4GB以上あれば、どんなブラウザーでも艦これは問題なく快適に遊べます。ただ、PCへの負荷は当然高くなってしまいますので、他のソフトも使いながら遊びたいというなら、CPUは4コア以上(Core i5相当以上)、メモリー8GB以上は欲しいといった感じですね。このクラスのPCがあればブラウザーの差なんて微々たるものなので、好きなブラウザーを使えばいいと思います(台無し発言)。HTML5化を機にPCを新しくしようと思いつつ、どんなスペックのPCを買えばいいのかわからずそのままという人は、参考にしてみてください。

ただし、コア数が多いからといってAtomやCeleronなど低価格PCに使われているCPUに期待してはダメです。もちろん艦これも遊べますが、表示がもたつく、他のソフトをちょっと使おうとすると急に重たくなるといったことは覚悟した方がいいでしょう。

試しに、似た性能となる4コアのAMD A6-1450(メモリー4GB)を搭載したPCで遊んでみましたが、起動が遅い、たまに表示が遅れる、他のソフト(電卓ですよ)を起動しようとしたらCPU負荷100%がしばらく続くなど、なかなか厳しい状況でした。

lab
▲CPU負荷はこんな感じですが、結構重い。ソフトは「動く」し、ゲームは「遊べる」わけですが、快適からは程遠いです

艦これ専用機にするなら話は別ですが、そうでないならそれなりの性能のPCを用意するほうが幸せになれます。

633シェア
36
488
0
109

Sponsored Contents