Firefox 3: What's New, What's Hot, and What's Not

Performance

Firefox 3 is noticeably faster and more lightweight than its predecessors. This isn’t the usual “this is the fastest Firefox yet” announcement: in this release, the browser has finally become usable without being a memory hog. I’m not being harsh: this is perhaps the biggest complaint that I and a lot of other users have had about the browser since Firefox 1.5 came out.

Finally, everything seems lightning fast:

• It starts … er … instantly—meaning that Opera and Safari are still faster on startup, but you don’t have to wait half a minute for Firefox to finally come to life.
• “Heavily-Ajaxified” pages are much faster—I was particularly impressed by the speed of Gmail: you don’t really have to wait more than a fraction of a second when you archive emails, for example.
• You can leave Firefox 3 on for hours without having it eating more and more of your RAM.

This is the short story, from the point of view of the everyday user.

Memory Management Improvements

As a matter of fact, Firefox developers really did an outstanding job this time. There’s a very interesting post on pavlov.net explaining what was done in detail.

The memory problems with Firefox 2 were apparently attributable, in part at least, to memory fragmentation. This is similar to the phenomenon that affects hard drive memory when you install and uninstall programs: your disk becomes fragmented, which can degrade performance. A similar thing occurs with RAM, only that in Firefox’s case, it happens whenever you open and close web pages in tabs: whenever a new page is loaded, if it’s bigger than the largest space in the heap, it won’t fit in; the only solution for the program is to increase the heap size.

Fortunately, the adoption of jemalloc (the same memory allocator used by FreeBSD) reduced memory fragmentation and, apparently, caused a 22% drop in the total amount of memory used by Firefox (on Windows Vista, at least).

Another important improvement to memory management was the introduction of a new “cycle collector” to automatically break mutual references between two objects when they’re no longer being used. This, in addition to other tweaks, such as improved expiration policies for Firefox’s caches and optimized image storage, have all helped to successfully rein in the browser’s previous memory usage woes.

Really Fast JavaScript Execution

Besides improving memory management, Firefox developers also worked hard to improve JavaScript performance. According to the benchmarks conducted by a few people, Firefox 3 seems to be significantly faster than its predecessor when it comes to executing JavaScript code. Most of the benchmarks were conducted using WebKit’s SunSpider JavaScript Benchmark, and in most tests, Firefox seems to perform better than its main competitors (Opera 9.5 beta, Safari 3.1 beta, and Internet Explorer 8 beta).

Of course, benchmarks shouldn’t be taken too seriously, but personally, I noticed that sites like Gmail and Google Reader seemed snappier in Firefox 3 than in Opera 9.5 beta, for example. Try using Gmail in Firefox 3: there are virtually no delays when performing “simple” Ajax calls to archive or load emails.

Cairo

I remember when I installed the first beta versions of Firefox 3: about 70% of the text on web sites seemed to have lost crispness and antialiasing for no apparent reason. This happened because at the time Firefox was using an unpatched version of the Cairo graphics library, which didn’t work that well on LCD displays. But as of Firefox 3 RC1, the issue was fixed.

Despite the initial problems, the integration of Cairo into Firefox core brought quite a few advantages to both users, namely:

• hardware-accelerated 2D image rendering
• fewer graphic rendering bugs
• better-looking graphics

Also, Gecko developers won’t have to worry too much about maintaining graphics-related code, as most of their burden will be lifted by Cairo’s development team: this appears to be another very significant victory for the Open Source model, that’s for sure.

Reflow Refactoring

Cairo isn’t the only big change concerning Firefox rendering, though. Firefox 3 sports a brand new (and still beta) release of the Gecko layout engine. Gecko 1.9b introduces improvements in many areas, but the so-called “reflow refactoring” seems to be one of the most notable ones.

The concept of reflowing has been defined in CSS 2.1 specifications to indicate the way browsers should position elements on a web page. More specifically, earlier versions of Firefox suffered a lot of bugs relating to the way the browser performed incremental reflows—the repositioning of elements on the page while the page is loading.

Incremental reflow problems were often noticeable on pages in which the width of some elements (like tables and images) were not defined or defined via percentages. In such cases, the browser was caused to perform an incremental reflow to determine the correct width based on other elements on the page.
The most famous of these bugs was the Slashdot Rendering Bug, which appeared in Firefox 0.8. This caused the incorrect rendering of the text on the Slashdot web page.

Apparently quite a few similar bugs were discovered (and fixed) in the last few years, and they were all caused by the way the Gecko engine performed incremental reflows. For a more detailed explanation of the situation, refer to the reflow refactoring page of Mozilla wiki. It’s quite an interesting read, but is also a little technical for the average reader, as it mentions various implementation aspects in detail.

What really matters is that as of Firefox 3, a lot (all?) bugs related to incremental reflow and intrinsic width were fixed, the browser is now able to display page elements more consistently, and it passes the Acid 2 test.
Unlike Opera and Safari developers, Firefox developers didn’t really try to build the browser to pass the Acid 3 test, the main reason being that Firefox 3 release was too close to bother with it.

Color Profiles

Designers will be happy (or maybe not…) to discover that Firefox 3 supports color profiles. This means that Firefox is now able to render images (pictures in particular) with their proper colors, for instance, when they’re viewed in professional photo editing programs like Adobe Photoshop. Deb Richardson wrote a very interesting article about this new hidden feature, which is worth reading.

Color support can be enabled either by installing the Color Management extension or by editing two settings in your about:config page (if you know what you’re doing).

This feature can be a great thing for Flickr users and photographers, but others may be a little bit reluctant to enable it, due to two significant trade-offs:

• It affects the browser’s rendering speed (it becomes 10-15% slower).
• Color profiles aren’t supported by plugins, and this may break color matching with certain web pages (designers, beware!).

These are the reasons why this feature is disabled by default (and why I’m going to disable the Color Management extension in my browser for the time being).

A Developer’s Dream

If you think that this new Firefox release is all about user interface improvements and performance, you’re wrong. This is perhaps the most notable developer-oriented release the Mozilla Foundation has produced so far: the number of open-source APIs and developer goodies that ship along with Firefox 3 is unprecedented and very impressive.

CSS Improvements

Firefox 3 delivers higher CSS 2.1 support. A lot of CSS-related bugs have been fixed, and a few new features have been added.

Kevin Yank wrote an informative post about two of Firefox 3’s new CSS features: its support for the ­ HTML entity (or “soft hyphen”), and for the inline-block display type.

Soft hyphens can be used to tell the browser where it’s acceptable to break a word—a feature that’s particularly useful for long words which wouldn’t otherwise be hyphenated. Apparently Firefox was the only major browser not to support this capability, so it will be possible and relatively safe to start using soft hyphens from now on.

The inline-block value for the display property, on the other hand, is not supported by IE7, so you still need to take precautions (such as creating a separate style sheet for “other” browsers), but it’s still a cool feature: if the display property of an element is set to inline-block, the element will be rendered as inline, but its content as block. For more details and examples, check out Kevin’s post.

Other CSS improvements include:

• color translucency support for the color property via rgba() and hsla()
• font-size-adjust now works on non-Windows platforms too
• ime-mode property to set the default state of form fields to normal, active, inactive, or disabled
• text-rendering property to instruct the Gecko engine to render text optimizing speed, legibility, or geometric precision (see some examples on the Mozilla developer site)
• :default CSS selector, to set the default properties of similar elements. For other CSS selectors, you’ll have to wait till Firefox 3.1, David Baron reports.
• the ability to set content and cursor to none
• support for negative z-index values (finally!)