実装されている仕様
たとえどんな手を使ってもスムースな体験を保証し、また利用可能な計算資源を活用しきるために、ゲームは通常複数のスレッドで動作しています。Web Workers を利用することで JavaScript のコードをバックグラウンドで動作させられます。これはリソースを大きく利用する操作をバックグラウンドに回すことでユーザインターフェースの応答性を確保するために有用です。
注: Spectre の影響により、メモリをスレッド間で共有するための SharedArrayBuffer オブジェクトはほとんどのウェブブラウザから一時的に削除されています。ワーカー同士の通信についてもさしあたりメッセージだけに制限されています。
Web Performance Working Group では計測にかかわるフックをウェブアプリケーションに提供するいくつかの仕様を作成しています。High-Resolution Time 仕様ではウェブアプリケーションが２つのイベント間で経過した時間を高精度に測定できるようにサブミリ秒精度の計時を公開しています。Performance Timeline はパフォーマンスメトリクスデータを保存・取得するための統一された方法を定義しています。また、個別のパフォーマンス測定用のインターフェースはそれぞれ別の仕様で定義されています:
- Navigation Timing はページ読み込みやエレメントについての時間測定仕様です
- Resource Timing はドキュメント内のリソースについての時間測定仕様です
- User Timing では高精度タイムスタンプによりアプリケーションのパフォーマンスを測定するための仕様です
バックグラウンドタスクの協調スケジューリング仕様 (Cooperative Scheduling of Background Tasks specification) はrequestIdleCallback メソッドを定義し、アプリケーションが他の動作を行っていないなどの機会に実行をスケジュールできるようになります。
スクリプトベースアニメーションの時系列制御 API (Timing control for script-based animations API) はアニメーション動作に必要なリソース利用量の削減につながるものです。
仕様化が進行中の仕様
緊密なメモリと計算資源制御を必要とするゲームは通常 C++ (か同等の言語) で記述されます。WebAssembly (Wasm) はウェブブラウザでほぼネイティブの速度で実行可能な低レベルバイトコード形式で、C, C++ やその他の言語からコンパイルで生成可能です。ほとんどの 3D ゲームエンジンは WebAssembly をコンパイルターゲットとしてサポートするようになりました。また、プラットフォーム間での効率的なコードの再利用も可能になります。
Resource Hints および Preload 仕様は開発者がリソースのダウンロードの最適化を、ダウンロード自体やダウンロードしたリソースの実行を遅らせる操作を実現することにより可能にしています。
Service Workers 仕様により外部へのネットワーク要求に介入したり要求に直接応答するような機構を実現します。アプリケーションはこれにより弾力的なキャッシュ制御を実装可能になり、サーバへの無駄なリクエストを防ぐことができます。
Server Timing はユーザエージェントとの要求・応答に係るパフォーマンス情報をサーバで取得するためのもので、アプリケーションが配送の際にそれらの情報を活用可能になります。
Long Tasks API はユーザインターフェースにかかわるメインのスレッドの稼働時間を食っている、長時間かかっている動作を検出するための機構です。
Paint Timing 仕様によりアプリケーションがページロード中の最初の描画開始やコンテンツがすべて描画された最初の時点などの主要なタイミングを取得可能になります。
アプリケーションの一部をアニメーション化する際のパフォーマンス最適化のために、CSS will-change を指定することでブラウザがアニメーションを開始する前にその影響を算出することが可能になります。
CSS contain プロパティーによりエレメントの下をその他のページ全体から独立したものと宣言できます。これを指定することでユーザエージェントが多大な最適化を実行することができるようになり、特に指定部分がスクリーンから外れた場合に他の部分のレンダリングに影響しないことをユーザエージェントが認識可能になります。
WebRTC の統計値取得 API (Identifiers for WebRTC's Statistics API) は RTCPeerConnection に関する統計情報にアクセスするための Web IDL オブジェクトを定義し、ウェブアプリケーションがそのネットワークやメディア処理のパフォーマンスを検証できるようになります。
調査中の項目
画面表示のために、負荷の高い計算を行うために GPU を活用したいと思うゲームもあるでしょう。一部分ですがこれは WebGL により実現されています。ウェブのための GPU CG (GPU for the Web Community Group) では現代的な 3D グラフィックス (一番初めに) や計算能力 (次に) を効率的、効果的、かつ安全に利用可能なウェブ向け API を Direct3D、Metal、Vulkan といった既存のネイティブの機構にとらわれずかつ互換性のある形で検討中です。
スレッド間同期のためにはロックを利用する必要があります。Web Locks API の提案は、リソースをロックし作業中の間保持してリリースする、という操作によりスクリプトが非同期で動作する機構を実現するものです。
Frame Timing API ではユーザデバイスで動作するアプリケーションが利用可能な秒間フレーム数の詳細な情報を取得できるようになります。
Event Timing Web Perf API ではユーザ入力によるイベントのいくつかについて遅延を測定するための機構を検討しています。
Priority Hints 仕様は、既存のプリロードなどのブラウザの読み込み機構を補完するため、ダウンロードすべきリソース間の優先順位を指定できるようにするものです。
CSS Animation Worklet API は複数のアニメーション効果をまとめて制御しスクリプトによるアニメーションを実現するための機構を提供します。この API はユーザエージェントがアニメーションをメインスレッドから分離したスレッドで実行できるようにすることでパフォーマンス確保の自由度を持たせるためのものです。
ユーザエージェントはスクロール連鎖やオーバースクロール動作などといったスクロールについての既定の動作を実装していることがありますが、ウェブアプリケーションでは pull-to-refresh や infinite scrolling といったモバイル環境で一般的な操作を実現するためにそれらを無効化したい場面があります。これらはスクリプトでも実現可能ですが、アプリケーションが既定の動作を必要な時に上書きするために passive フラグを付けずにタッチイベントの監視が必要になるといったスクロールのパフォーマンスへの悪影響があります。CSS overscroll-behavior プロパティーを利用することでスクロールの現在地がスクロール限界に到達した場合のコンテナの動作を制御することができ、ウェブアプリケーションが効率的に既定のスクロール動作を無効化できるようになります。
進行中の項目で対応していない項目
- 人工知能 (AI)
- いくつものゲームではゲーム AI という名前で現実のプレイヤーが操作していないゲームキャラクターに高度な振る舞いをさせる機能を実装しています。ゲームにおける AI のコンセプトは他の分野での概念とは異なりますが、ゲーム AI は機械学習、ニューラルネットワークやその他のデータマイニングのアルゴリズムを元とした似たような技術を活用可能です。ウェブブラウザにおけるそのようなアルゴリズムの実装の次善最適解は WebAssembly と WebGL を利用するものです。2017年10月に公表された Base Machine Learning API 提言はウェブアプリケーションに適した機構を公開するためのものですが、W3C における標準化活動までは至っていません。