Fennec – Performance is the Theme

Performance is very critical in Fennec, the mobile version of Firefox. Every feature, every aspect of appearance, every piece of code… is all judged by the impact on performance. We’re lucky to have automated performance tests for Maemo and we’re close to getting the same tests working for Windows Mobile.

A few weeks ago we were making a big push toward a full CSS-based theme for Fennec. CSS means we could use physical dimensions, instead of pixels, and updating the theme for devices with different screen resolutions would be easier. Sean Martell was creating some really cool prototypes using CSS3 functionality. We landed the changes in Fennec only to discover a significant negative impact on startup (~200ms) and panning.

The CSS3 border-color styles were just too slow to render on the devices. We were actually hoping to use box-shadow because it looked much better, but the performance was a little worse. Since we were close to a Windows Mobile release, we needed to replace the new theme with something faster. We changed to a basic, flat CSS-based theme. It more than made up for the startup and panning speed problems, but didn’t look very good.

In order to make a good looking (and fast) theme we decided to switch back to images for buttons in the main browser UI. That part of the UI affects startup and panning performance more than anything else. We could still use CSS-based theme for other parts of the UI, as long as those parts do not affect startup and panning. The current theme is mostly complete and achieves the performance goals. It will be more work for us when switching between device screen resolutions, but extra work for us is better than a slower user experience.

The current theme uses a mix of pixel-based images and millimeter dimensions for everything else. It looks pretty good too.

We have some other, non-theme related, performance nuggets I’ll post about soon too.