We’re excited that other browsers have started to use hardware to accelerate graphics performance. With different implementations starting to become available, now’s a good time to blog about the difference between full and partial hardware acceleration.
In November 2009, developers had their first look at hardware accelerated graphics in a browser at the PDC. In March 2010, we released the first IE9 Platform Preview with “GPU-powered HTML5” turned on by default. In that release, hardware acceleration applied to everything on every Web page—text, images, backgrounds, borders, SVG content, HTML5 video and audio—using the Windows DirectX graphics APIs. With Platform Preview 3 in July, IE9 introduced a hardware-accelerated HTML5 canvas.
Understanding Hardware Acceleration
Browsers can use hardware to accelerate none, some, or all of the steps in rendering an HTML pages. The diagram below illustrates the major steps in HTML page rendering in IE9.
Content Rendering. IE9 accelerates the first phase, Content Rendering, using Windows’ Direct2D and DirectWrite subsystems. As shown back in November, the results here include much smoother text and vector graphics. Accelerating this phase using the GPU (Graphics Processing Unit) improves the display performance of the most common HTML elements: text, images, backgrounds, and borders.
Page Composition. IE9 uses Direct3D for the next phase, Page Composition, giving IE awesome performance in image-intensive scenarios (like Flying Images and FishIE Tank). Accelerating this phase takes advantage of one of the GPU’s most significant features: the ability to draw bitmap images at very high speed. Moreover, because the GPU’s private memory retains images, redraw of pages heavy in images is very fast.
Desktop Composition. After a browser renders content and composes pages, Windows Vista and Windows 7 use the GPU to compose the final screen display via the Desktop Window Manager (DWM). Because IE9 uses DirectX and only DirectX, there is better interaction between IE9 and the DWM, using less GPU memory and resulting in better stability than browsers that mix different subsystems.
Full vs. Partial Acceleration
With IE9, developers have a fully-hardware accelerated display pipeline that runs from their markup to the screen. Based on their blog posts, the hardware-accelerated implementations of other browsers generally accelerate one phase or the other, but not yet both. Delivering full hardware acceleration, on by default, is an architectural undertaking. When there is a desire to run across multiple platforms, developers introduce abstraction layers and inevitably make tradeoffs which ultimately impact performance and reduce the ability of a browser to achieve ‘native’ performance. Getting the full value of the GPU is extremely challenging and writing to intermediate layers and libraries instead of an operating system’s native support makes it even harder. Windows’ DirectX long legacy of powering of the most intensive 3D games has made DirectX the highest performance GPU-based rendering system available.
When you run other browsers that support hardware acceleration, you’ll notice that the performance on some of the examples from the IE Test Drive site is comparable to IE9 yet performance on other examples isn’t. The differences reflect the gap between full and partial hardware acceleration. As IE supports new, emerging Web standards, those implementations will also be fully hardware accelerated.
Hardware acceleration of HTML5 video is a great example. At MIX10, we showed the advantage of using hardware for video. In March, IE9 played two HD-encoded, 720p videos on a netbook using very little of the CPU while another browser maxed out the CPU while dropping frames playing only one of the videos. Because of full hardware acceleration of the entire pipeline, you experience great performance playing these videos while moving them around the page and styling and compositing them with opacity, using web standard markup.
Measuring Graphics Performance
A typical measure of graphics performance is frames-per-second (FPS), which indicates how many times per second a browser can update the screen. Be skeptical of demos that show frames-per-second rates greater than 60 fps. The reason is simple: most computer screens refresh at 60 hertz. While it’s possible to render and compose page content faster than 60 frames-per-second, most users will not see it. The extra CPU and GPU cycles spent to render at rates above the refresh rate of your monitor are simply being wasted. This is why the graphics performance demos on the IE9 Test Drive site explicitly limit their frames-per-second to 60—to avoid wasting cycles rendering content you won’t see.
More interesting than simple frames-per-second measurements is looking into what your PC is actually doing. Using the Windows Performance Analysis Tools, developers can see that other hardware-accelerated browsers take anywhere between 20% and 500% more CPU time than IE9 to render a single frame. Depending on the graphic operations required to render the Web page, the actual difference in CPU time will vary. If this additional CPU consumption occurs between visual updates (16.7 milliseconds on a typical 60 hertz display), the difference may not be visible to the user but it does affect how much of your PC is available to do other tasks. Less CPU usage means better overall system responsiveness.
Remember, Real World Performance is Multidimensional
As Jason Weber described in a recent post, display rendering performance is one of 11 core subsystems in modern browsers. While GPU-accelerated page display can improve the performance of every Web page, it is particularly important on graphics-intensive pages (and demo pages designed to highlight graphics performance). All browser subsystems need to be fast individually, and work well together, to make the overall browsing experience of the real world Web fast.
Better Browsing on Windows
We’re excited that other browsers are starting to optimize for the Windows platform. Taking advantage of the PC’s hardware through the Windows APIs makes browsing on Windows better than browsing on other systems. Since that first demo last November, other browser vendors have begun to work on hardware accelerated rendering using the DirectX family of Windows APIs. Hardware acceleration is an important part of delivering great HTML5 performance. Keep in mind that not all hardware acceleration is equal. Today, IE9 is the first and only browser to deliver full hardware acceleration of all HTML5 content.
—Ted Johnson, Program Manager Lead for Web Graphics
More...