Nodachisoft Nodachi Sword Icon
  
@あまじ✎ 2020年7月9日に更新

ブラウザで扱えるメモリ上限の確認

ブラウザ内で扱えるメモリ量の上限は異なります。

ブラウザアプリを開発する際、 JavaScript で動作する Web アプリ(自作 Webアプリのフリーゲーム)や、 SPAなどを作るときのメモリ利用可能上限が気になったので確認した内容をまとめました。

確認したい環境、内容まとめ

  • 厳しいメモリ利用上限がないかを確認
  • 確認OS は Win10 と Android 9。
  • ブラウザは IE11, Edge, Chrome, Firefox (デスクトップとスマートフォン)

ブラウザゲームでグラフィック性能を活かそうとする時に使うことが多い、Canvas では、利用可能なメモリ上限が固有に設けられていたりするので注意が必要のようです。 そのあたりは別途検証したいと思います。

確認方法

実際に確認方法ですが、0.5 M (50万個) の文字列を作り、それをグローバル変数の中に連想配列としてユニークなキーで文字列を詰め込んでいき、どこまで詰め込めるのかで確認します。

0.5 M(50万個)の数字の連続で作られた文字列は、Unicode UTF-16 でブラウザ内部では 1MByte の領域が必要となります。

1MBtyte の文字列をいくつ保持できるのかで、メモリ上限を確認します。

なお、計測に作成した文字列以外でもメモリは使われていますので、あくまで目安としての計測であることにご注意ください。

測定した端末の詳細スペック

測定した端末のスペックは以下の通り。

デスクトップ版

  • OS : Windows10 Home
  • 物理メモリ : 8 GB
  • 仮想メモリ : 20 GB

スマホ版

  • OS : Android 9
  • 機種 : Sony Xperia XZ2 H8296 Build/52.0.A.11.32
  • 物理メモリ : 4 GB

計測用のコードと画面

計測用のコード

計測で自作したソースコードはこちらです。 以下を html で保存してブラウザで表示した後「Start calc」ボタンで 計測開始できます。

 
最大メモリ確保の確認用HTML
<html lang="ja"><head><title>Calc Memory Limit</title>
<script type="text/javascript">
var count = 0;		// 1MByte の文字列をいくつ所持しているか
var globalVar = [];	// 1MByte の文字列を格納する先
function getRandomInt(min,max) {return Math.floor(Math.random() * Math.floor(max-min)+min);}
function id(name) { return document.getElementById(name); }
function calc() {
	try {
		let genBuffer = "";
		for ( i = 0 ; i < ( 1024 * 1024) / 16  ; i++ ) {
			genBuffer += getRandomInt(12345678, 99999999).toString();
		}
		globalVar[count] = genBuffer;	// 1MByte の文字列を格納
		count++;						// カウントアップ
		id("addmemorysize").innerHTML = genBuffer.length * 2;
		id("memorysize").innerHTML = (genBuffer.length * count * 2);
		setTimeout(calc, 10);			// 1msec で再呼び出し
	} catch ( e ) {	// out of memory 例外がキャッチできるかの確認
		console.error("name=" + e.name + ", message=" + e.message );
	}
}
</script>
</head>
<body><h1>Calc Memory Limit:</h1><div>
	<input type="button" value="Start Calc" onclick="calc()"><br />
	Buffer Unit Length: <span id="addmemorysize">0</span>Bytes / 10msec<br />
 	Used Buffer Length: <span id="memorysize">0</span>Bytes
</div></body></html>

もしご自身の環境で実行する場合は、上記をコピーして html ファイルとしてローカル保存してブラウザで読み込んでください。

ご注意

メモリ確保上限まで行くとクラッシュするブラウザが多いので、もちろんで自己責任で。 実行しているOSを巻き込むような悪影響がでることようなことは、そうそう無いとは思いますけど、念のためお気を付けを。

Google Chrome(デスクトップ64bit 版)

2020年4月時点で最新のGoogle Chrome (デスクトップ64bit 版)の ver 80.0 ではタブあたり 最大 4GB までのメモリが扱える仕様のようです。Google Chrome のエンジン部である、Chromium としての仕様のようです。

元ネタ

V8エンジン仕様や Chromium のフォーラムを参照。ページ下部の参考欄にリンクを付けています。

実際にメモリ計測用の JavaScript を動かすと、開発コンソール上から確認できる JavaScript VM 上でおおよそ 2.1 GB のヒープ領域を確保したあたりで Chrome が Paused before potential out-of-memory crash と例外ログをコンソール出力して、強制終了一歩手前を検知して停止しました。

Chrome のメモリクラッシュ前停止

この時、Windowsのタスクリストコマンドでメモリ使用料を確認すると、対象のブラウザタブのChromeプロセスとしてもJavaScript VM とほぼ同等の 2.2 GB 程度利用していました。

tasklistの様子

PCのメモリ容量もまだ足りている感じでしたが、バリバリ画像処理を行ったりするときは 要注意かもです。

Internet Explorer 11(デスクトップ32bit 版)

1.6 GB 程度メモリを確保した時点で、ブラウザがクラッシュして再起動しました。Out of Memory の例外検知はできないようです。32bit アプリのメモリ制限の壁があるので、妥当な数値ですね。 Internet Explorer 11 のメモリクラッシュ前停止

なお、2020年4月現在でも Internet Explorer 11 は日本企業内のシステムや公官庁のWebサービス等で使われており、日本のインターネットアクセスの全体の 5~10% 程度を占めています。(※StatCounter等で調査

日本以外ではすでに IE11 はほぼ使われておらず Edge や Chrome を前提としたWebサービスを作製しているのが現実です。

IE11 はいつまで意識するか

米Microsoft が IE11 のサポートを完全に打ち切るまでは、古い端末からのアクセスを意識したり、保守などの理由で世の中の Webサービスや利用ブラウザとして2025年~2027年くらいまでは使われ続けると思ってます。

Edge(EdgeHTML デスクトップ64bit 版)

Edge ブラウザは2020年1月15日に大きなアップデートをしており、ブラウザのエンジンを Microsoft 独自の EdgeHTML から Google 社が公開するオープンソースの Chromium に変えています。

日本国内の Windows Update を経由して、2020年4月から Chromium 使用版にアップデートされた。 ですので、今後インターネットで公開する Webアプリではそこまでこの古い EdgeHTML エンジンを使用した Edgeブラウザの結果を気にする必要はなく、あくまで過度期の参考情報となります。

結果、3.8 GB 程度でブラウザがクラッシュして再起動しました。画像はクラッシュ前にキャプチャしたもの。 Edge のメモリクラッシュ前停止

なお、EdgeHTML エンジンを使用している、Edgeブラウザはブラウザレンダリングに使用しているプロセスのイメージ名は "MicrosoftEdgeCP.exe" のようですが、Chromium からは別のプロセス名ですので、タスク監視の際は注意が必要です。

Edge(Chromium デスクトップ64bit 版)

Edge Chromimum 版の計測結果、0.8 GB までバッファ領域を確保したところでクラッシュしました。プロセスは 2.23 GB まで確保出来ているようです。Chrome と数字的にも全く同じ結果になってます。 なお、Chromium版になって、プロセスのイメージ名は "msedge.exe" に変更されています。

Safari

筆者の手持ち端末に MacOS や iPhone がなく、Apple 社は Windows 向けの Safari は 2012年の Version 5.17 までしか出していませんので計測対象外にします。 Mac OS で計測する機会があったら情報更新したいと思います。

最後のWindows向けSafari

Firefox(デスクトップ64bit 版)

2020年4月15日の最新 バージョン 75.0(64 bit)で確認しました。 画面上、1.4 GB 程度のバッファを確保したところでブラウザがクラッシュして反応しなくなりました。

実際にFirefox のプロセスが使用しているメモリ量を確認すると、 4.3GB 程度まで使用してクラッシュしています。

推定ですが、文字列の結合処理の経過で作成した結合元の文字列が、StringBuffer のようにプールされ、利用され続けており、メモリ領域から解放される対象となっていないのが原因と思われます。

もしかしたら、単純に Firefox のガベージコレクションによる不要メモリの解放処理が発動していないだけの可能性もあります。

文字列のプールとか

文字列結合部分をいじると、バッファ確保できるサイズが増減したため、内部的にプールされている文字列が所持され続けていることが問題とは思います。

Firefox のメモリクラッシュ時点のプロセス

Chrome for Android

400MB 程度までバッファ領域を確保してクラッシュしました。 実際に Android 内での Chrome アプリプロセスとしては 1.1 GByte 程度の確保が出来ており、 try-catch でつかめたりはせず、以下のようなクラッシュ画面が表示されます。

Chrome のメモリクラッシュ時点のプロセス

Firefox (Android版)

デスクトップ版とまったく同様の結果でした。 デスクトップ版を参考ください。

まとめ

文字列の結合処理やプール処理がブラウザによって異なると思うので、見かけで確保できたサイズと、実際に利用可能なメモリ領域の差異はあります。

「バッファが確保できたサイズ」と「プロセスが確保したメモリ」の差異が大きすぎてちょっと結果としては微妙ですが、最近のブラウザであれば GB 単位で問題なくメモリを確保できるようです。

メモリリークは気を付ける必要はありますが、普通にメモリを確保するのに上限を毎回気にして解放できるようにこまめにして、etc と頑張って作りこむ必要まではなさそうです。

ブラウザ バッファ確保した文字列長 プロセスが確保できたメモリ
Google Chrome Ver 81.0
デスクトップ 64Bit版
0.8 GB 2.3 GB
Internet Explorer11
デスクトップ32bit 版
0.45 GB 1.6 GB
旧 Edge Ver 44.0
EdgeHTML デスクトップ64bit 版
2.8 GB 3.6 GB
Edge Ver 81.0
Chromium デスクトップ64bit 版
0.8 GB 2.3 GB
Firefox Ver 75.0
デスクトップ64bit 版
1.4 GB 4.3 GB
Google Chrome Ver 81.0
Android 版
0.4 GB 1.1 GB
Firefox Ver 68.7
Android 版
1.4 GB 3.5 GB

参考

変更履歴

  • 2020/04/16 記事公開
  • 2020/07/09 EdgeブラウザのEdgeHTMLアップデート情報を更新
 
 
送信しました!

コメント、ありがとうございます。

なんかエラーでした

ごめんなさい。エラーでうまく送信できませんでした。ご迷惑をおかけします。しばらくおいてから再度送信を試していただくか、以下から DM などでご連絡頂ければと思います。

Twitter:@NodachiSoft_jp
お名前:
 
連絡先:
 
メッセージ:
 
戻る
内容の確認!

以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください

お名前:
 
連絡先:
 
メッセージ:
 
Roboto からの操作ではないという確認のため確認キーを入れてください。
確認キー=95
戻る
 / 
送信確認へ
コメント欄
コメント送信確認へ

関連ありそうな記事(4件)です!

ブラウザでデータの保存

#ブラウザゲーム開発記録✎ 2020-07-17
ブラウザアプリ(Webアプリ)でデータを保存する先について、cookie、webstorage、サーバ側保存を比較し使いどころを整理
広告領域
追従 広告領域
目次
ブラウザで扱えるメモリ上限の確認
ブラウザで扱えるメモリ上限の確認
確認したい環境、内容まとめ
確認したい環境、内容まとめ
確認方法
確認方法
測定した端末の詳細スペック
測定した端末の詳細スペック
計測用のコードと画面
計測用のコードと画面
Google Chrome(デスクトップ64bit 版)
Google Chrome(デスクトップ64bit 版)
Internet Explorer 11(デスクトップ32bit 版)
Internet Explorer 11(デスクトップ32bit 版)
Edge(EdgeHTML デスクトップ64bit 版)
Edge(EdgeHTML デスクトップ64bit 版)
Edge(Chromium デスクトップ64bit 版)
Edge(Chromium デスクトップ64bit 版)
Safari
Safari
Firefox(デスクトップ64bit 版)
Firefox(デスクトップ64bit 版)
Chrome for Android
Chrome for Android
Firefox (Android版)
Firefox (Android版)
まとめ
まとめ
参考
参考
変更履歴
変更履歴
Nodachisoft © 2020