​【JavaScript】ブラウザで動くガチな自作ベンチマーク「Aetheris Bench v17.0」を作ってみた。

​こんにちは！今回、ブラウザ上でPCやスマートフォンの性能を相対比較できる、オリジナルのローカルベンチマークソフト 「Aetheris Bench (v17.0 Final)」 を開発しました。
​「JavaScriptでベンチマークなんて、JITコンパイラの機嫌やガベージコレクション（GC）でブレるから正確に測れないのでは？」と思われるかもしれません。
そこで本プロジェクトでは、JIT最適化によるデッドコード消去の防止、TypedArrayによるメモリ再利用（GC最小化）、GPUタイマークエリ拡張の利用、Geekbench方式の加重幾何平均スコアなど、ブラウザ環境の限界に挑むためのガチな仕組みを多数盛り込みました。
​この記事では、本ベンチマークの測定アルゴリズムや、実装におけるこだわりポイントについて解説します。
​Aetheris Bench で測定できる5つのメトリクス
​本ベンチマークでは、デバイスの性能を多角的に評価するため、以下の5つのフェーズで測定を行っています。
​1. 🔴 CPU 整数演算 (MB/s)
​処理内容: CRC32・Adler32・xxHash32・SHA-256 圧縮関数を実際にWeb Workers上で回して処理速度を計測します。
​ガチポイント: 各アルゴリズムの出力を次のラウンドの入力バッファへフィードバックさせる構造にしています。これにより、JITコンパイラが「結果が使われていないから計算自体を消去（Dead Code Elimination）」してしまうのを防いでいます。
​2. 🟠 CPU 浮動小数点 (Mflops/s)
​処理内容: 128x128行列積・1024点FFT・64体N体シミュレーション（重力・softeningあり）・クォータニオン積+正規化 の4種をラウンドロビンで実行します。
​ガチポイント: すべてのバッファはWorker起動時に1回だけ確保し、ループ内は TypedArray の書き換えのみ（new をしない）で行うことで、GCの発生を徹底的に排除しています。
​3. 🟡 メモリ帯域幅 (GB/s)
​処理内容: 256KB / 1MB / 4MB / 16MB / 64MB / 256MB の 6階層 に分けて順にデータ転送速度を測定します。
​ガチポイント (OOM対策): 巨大な階層ほど、確保するメモリ量に配慮して並列Worker数を自動で絞ります。また、navigator.deviceMemory を参照し、2GB未満の低RAM環境と判定された場合は、最上位の256MB階層の測定を自動スキップしてクラッシュ（Out of Memory）を防ぎます。
​4. 🟢 GPU シェーダー複雑度 (ms / FPS)
​処理内容: レイマーチング（SDFシーン）、値ノイズベースのFBM、疑似AO、GGX/Fresnel/SmithによるPBR風シェーディング、距離ベースの疑似フォグを組み合わせた、非常にヘビーな複合シェーダーを走らせます。
​ガチポイント (真のGPU時間計測): ChromeやEdge、Firefoxなどの対応環境では、EXT_disjoint_timer_query_webgl2 拡張機能を使用し、ブラウザのオーバーヘッドを除いた GPUの実描画時間（ナノ秒単位）を直接計測 しています。拡張に非対応のiOS/macOS Safari環境では、自動的にFPS計測へフォールバックします。
​5. 🔵 GPU 生FPS
​処理内容: 純粋なフレームレート（FPS）を測定し、3D描画能力の総合的なポテンシャルを評価します。
​技術的なこだわり＆実装の工夫
​① スコア算出には「Geekbench方式の加重幾何平均」を採用
​一般的なベンチマークでありがちな「単純な足し算（算術平均）」だと、1つの項目だけが異常に突出している場合に、他の致命的な弱点が隠れてしまいます。
Aetheris Benchでは、各メトリクスを log2(実測値/基準値) で対数圧縮（外れ値の耐性を向上）した上で、加重幾何平均（相乗平均） を採用して合成スコア（Aetheris Index）を出しています。これにより、どれか1項目でも極端に低いボトルネックがあると全体スコアが強く引き下げられる、バランス重視の評価が可能になりました。
​② 3DMarkに着想を得た「再現性テスト」と「サーマルスロットリング検知」
​測定のブレを無くすため、最大7回（標準3回）の繰り返しテストを実行し、平均・中央値・標準偏差・95%信頼区間などの統計情報を算出できます。
さらに、連続実行時のスコアが単にランダムにばらついているのか、それとも熱によって一貫して下がり続けているのかを区別するサーマルスロットリング（熱ダレ）検知のヒューリスティックロジックも組み込んでいます。
​③ OffscreenCanvas によるUIと計測の分離
​負荷測定中に画面描画（UIの波形アニメーションなど）が計測の足を引っ張らないよう、波形ミニキャンバスは対応環境において OffscreenCanvas + 専用Worker でメインスレッドから完全に分離して描画しています。
​仕組み・技術スタック
​フロントエンド: HTML5 / CSS (Tailwind CSS) / プレーンなJavaScript（クラス設計エンジン）
​並列処理: Web Workers (マルチスレッド演算)
​グラフィックス: WebGL2 (複合フラグメントシェーダー)
​統計・計算: 対数正規化、加重幾何平均、t分布（95%信頼区間）、1% Low FPS算出
​その他機能: 履歴管理（localStorage）、同一SoC自動推定比較、JSON/PNGエクスポート機能
​※ローカル環境（file://）でもダブルクリックするだけでそのまま動くよう、あえてES Modules (import/export) を使わずにカプセル化されたクラス設計で実装しています。
​おわりに
​ブラウザというサンドボックス環境の上で、いかにOSやネイティブアプリに近い精度でハードウェアをいじめ抜くか、という点にこだわって作成しました。
特にJavaScriptならではの罠（JITやGC）を回避するロジックや、WebGL2でのGPUタイマークエリのハンドリングはとても勉強になりました。
「自分の環境だとこんなスコアが出た」「このアルゴリズムの負荷はもっとこうした方がいい」といったエンジニアの皆様からのフィードバックやアドバイスをお待ちしております！
https://claude.ai/public/artifacts/fccc8b7e-e735-4547-bad7-df810162f471