다음을 통해 공유

Velocity 2011 カンファレンス: Internet Explorer の最新化によるパフォーマンスの向上

  • 아티클

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。 

【元記事】Velocity 2011: The Performance Impact of Modernizing Internet Explorer (2011/6/25 2:43 AM)

Velocity 2011 カンファレンス : Internet Explorer の最新化によるパフォーマンスの向上

現在のブラウザーには、HTML5 アプリケーションの魅力を引き出すために非常に高い性能が求められています。こうした中、IE9 にさまざまな最新機能が導入されたことによって Web サイトの可能性が広がり、ユーザーが現在使用する HTML4 サイトのパフォーマンスも大幅に向上しました。]

先日の Velocity 2011 カンファレンスでは、IE9 の実際のパフォーマンスの向上を明らかにするために、対話型の HTML4 Web アプリケーションとして「Modernizing Internet Explorer」が紹介されました。

View the entire Velocity 2011 presentation, Modernizing Internet Explorer
Velocity 2011 プレゼンテーション「Modernizing Internet Explorer 」 全体を表示する

この現実に即したシナリオでは、この 20 年間 HTML4 標準ベースのマークアップを使用して開発されてきた無数の Web サイトについて、HTML5 による Web サイトの再作成は行わず、ハードウェア アクセラレーションを完全活用することで、現在どのようなことが可能なのかを試すことができます。

このプレゼンテーション サイトは、各種のブラウザーで動作します。また、今日の Web サイトに多く見られる HTML、CSS、JavaScript のコーディング パターンを使用しています。さらにこのプレゼンテーション サイトでは、Internet Explorer の最新化にあたってマイクロソフトが採用した体系的な方法により、パフォーマンスがどの程度向上したのかもわかります。

IE9 でこのプレゼンテーションを操作してみると、Web アプリケーションというより、ネイティブの Windows アプリケーションに近い、反応の良いエクスペリエンスを実感できます。スライドの切り替わりはスムーズで滑らかです。方向キーを押し続けると、プレゼンテーション内のセクションが高速でスクロールされます。反応が悪くなることはほとんどありません。

今年の Velocity カンファレンスは、オライリー メディア社が主催し、Steve Souders 氏と Jesse Robbins 氏が議長を務めましたが、業界全体から 2,000 人を超える開発者が参加し、コミュニティのエキスパートからベスト プラクティスを学んだり、業界として Web を高速化する方法について共同研究を行ったりしました。

今回のカンファレンスは、IE9 が 3 月に公開された後の最初のカンファレンスであり、進化した Internet Explorer によるパフォーマンスの向上を Velocity のコミュニティと共有する初めての機会でした。昨年のカンファレンスは、マイクロソフトが IE Platform Preview 3 を公開した直後に行われました。IE Platform Preview 3 といえば、既に 7 つも前のバージョンであり、たった 1 年でパフォーマンスは驚くほど向上しました。

パフォーマンスの分析

Windows パフォーマンスツールキットを使うと、Web アプリケーションの実行時のパフォーマンスを測定したり、下層ハードウェアがどのように活用されているかを確認したりすることができます。また、ブラウザーの種類によるパフォーマンスの違いを比較することもできます。以下の CPU の図は、IE8 および IE9 において、Velocity 2011 プレゼンテーションの 1 つのフレームをアニメーションとして描画するのに要する時間を示しています。この結果は、3 年前の Dell Precision ワークステーション (3.0 GHz Intel Pentium デュアルコア、4 GB 物理メモリ、NVIDIA GeForce 8600 GT、100 GB 7200 RPM ドライブ、Windows 7) を使用して得られたものです。エクスペリエンスは当然 PC の構成によって多少異なってきますが、全体としては、一般的な IE9 のユーザー エクスペリエンスを示していると言えるでしょう。

Diagrams showing CPU usage running the Velocity Presentation in IE8 and IE9.

ご覧のように、IE8 ではプレゼンテーションの 1 つのフレームをアニメーション表示するのに 1.251 秒かかっています。プロセスは、IE8 が JavaScript タイマーに基づいて起動すると始まり (青色の箇所)、未処理のイベントを処理していきます。次に、IE8 の JavaScript インタープリター (黄色) が各スライドの次の位置を計算し、算出された位置で DOM を更新します。さらに、IE8 のレイアウト エンジン (緑色) がスライドを画面上で移動し、最後に、IE8 の CPU ベースのグラフィック システムによりスライドが画面に描画されます (ピンク色)。

IE9 では、9 ミリ秒 (0.009 秒。IE8 の 139 倍の速さ) という驚くべきスピードが達成されています。CPU 上では、同じ実行時のパターンがネイティブに近いスピードで処理されていることがわかります。システムのメモリ負荷が少ないこと、および処理されるイベント数が少ないことから、IE9ではイベントがすぐに処理されます (青色)。その後、IE9 にネイティブに組み込まれた新しい JavaScript エンジン Chakra が、ネイティブ マシン コードを実行してスライドの新しい位置を計算し、DOM を更新します (黄色)。そして、IE9 の新しいレイアウト エンジンがスライドを連続的に移動します (緑色)。最後に、GPU がコンテンツを画面に描画します (ピンク色)。

今回も有意義なカンファレンスとなったことを、Velocity の Web パフォーマンス コミュニティの皆さんに感謝します。Web パフォーマンスの向上に多くの方が尽力されていることを大変うれしく思います。コミュニティはこれからも成長し続けるので、一丸となって Web の可能性を広げていきたいと思います。

—Jason Weber、Internet Explorer パフォーマンス リード