「Microsoft Edge」のUIが劇的に高速化 ～内部プロジェクト「WebUI 2.0」の秘密

公式ブログ「Microsoft Edge Blog」

　「Microsoft Edge」のユーザーインターフェイス（UI）の多くはJavaScriptで構築されているが、Microsoftはそのパフォーマンス改善に取り組んでいるとのこと。米国時間5月28日に公式ブログ「Microsoft Edge Blog」で、その詳細と成果が明らかにされている。

　「Edge」のハブUIにはお気に入りや履歴、ダウンロード、ウォレットといったさまざまなツールが搭載されているが、エンドユーザーのマシンから収集されたテレメトリを分析したところ、いくつかの改善点が判明したという。

　まず、モジュール化が不十分で、厳密には必要ではないにもかかわらず、コンポーネント間で共通のコードがあった。そのため、一部で速度の低下を招いていたという。また、コードの多くはJavaScriptに依存するフレームワーク――「React」など――を用い、クライアントサイドでレンダリングされていた。しかし、とくにローエンドデバイスではサーバーサイドレンダリングを活用することで、リソース消費とレンダリング速度を改善できる余地があった。

　そこで、同社は「WebUI 2.0」という内部プロジェクトを立ち上げ、以下の点を重視したUIアーキテクチャーを構築したという。

• コードのバンドルのサイズと、UIの初期化パス中に実行されるJavaScriptコードの量を最小限に
• HTML/CSS中心のマークアップファースト。UIレンダリングのJavaScriptコードを減らす
• モジュール化を進める
• 最新のWebエンジンに最適化されたWebコンポーネントのリポジトリを利用

「React」からHTML/CSS中心のマークアップファーストな「WebUI 2.0」へ切り替えることで、レンダリング速度が大きく向上

　この成果は「Edge 122」以降の「ブラウザーのエッセンシャル」（Browser Essentials）ツールで実地にテストされ、42％ものパフォーマンス改善を達成した。SSDのないデバイスや8GB未満のRAMを搭載したデバイスでは、なんと76％も高速になっているという。

「Edge」を快適に利用するための機能や情報を集約した「ブラウザーのエッセンシャル」。最近は「Edge」のアップデートもここから行えるようになった

　さらに「Edge 124」では「お気に入り」ツールにも「WebUI 2.0」が投入され、40％も高速化しているとのこと。

　同社は今後も他のツールへ「WebUI 2.0」の展開を進め、「Edge」の全体的なパフォーマンス改善に努めるとしている。