Saturday, April 5, 2008

What's new In firefox 3, Pt 1, Pt 2 and Pt 3

Rest of the post will be coming soon.

1. Turbo speed

When we talk about speed, there are several types involved:
app starts up speed,
app response speed (snapiness, beachball-ness)
page loading speed (download),
page rendering speed,
speed of reading from history (cache, when you click back/forward button of the browsers).
Javscript speed (dynamic content of the webpages).

Firefox improves in these area:
  • By rewriting most codes in cocoa, starts up speed is improved up to 2x, beachball has been almost 100% removed.
  • By increasing the default number of request sent to server by firefox, the page loading speed are up to 3x faster
  • Mozilla developers put alot of concentration on javascript, altho a minor fraction of most webpages, javascript becomes more important when surfing websites such as gmail, etc, which uses mass amount of client side javascripts. Firefox 3's javascript speed (according to sunspider test suite) will be 4.2x faster than firefox 2, and will be leading among all stable released browsers.
  • An added benefit is that firefox's UI is written in javascript, so this improvement also improve firefox's snapiness.
  • Firefox 3 is using a new backend 2D rendering lib called "cairo", which improves the page rendering of firefox 3 on mac greatly. I will talk more practical benefit of cairo in next post.

2. Less memory

a story here about memory stress test, firefox 3 beats all other browsers
Firefox 3 will be using a new memory allocator called jemalloc, which is the new memory management method in FreeBSD 7 (just released last month).

By using jemalloc, and all other memory improvement techniques (Picture decoding method, for example). Firefox 3 will start up using slightly higher memory, but the memory usage will cap around ~100MB (on my MB with 2G memory), and firefox 3 will release memory more frequently, in the end, firefox 3 uses up to 60% less of memory compare to firefox 2.

Pt 2 Its all about Cairo

Its all about Cairo
No, I haven't been to that beautiful city, the Cairo Im referring to is a new powerful 2D rendering library firefox 3 will be using on all platforms (windows/mac osx/linux). The advantages of cairo includes:
a vector graphics–based, device-independent API for software developers. It is designed to provide primitives for 2-dimensional drawing across a number of different backends. Cairo is designed to use hardware acceleration when available.

Project homepage
supported output targets include the X Window System, Win32, image buffers, PostScript, PDF, and SVG file output. Experimental backends include OpenGL (through glitz), Quartz, and XCB.
Except the improved rendering quality, This enables a lot of new powerful functions I will be introducing below:

3. Full Page Zoom

Full page zoom means when zoom in/out a webpage, the structure of the webpage doe not change. Obviously, that means the text, images, tables, layers, and Even FLASH content of the page are zoomed altogether when you perform zooming operation. (now you know how mobilefirefox will be working!)

more full-page zoom glory, shortcut is ++/-

Zoom with embeded video

This function was first offered by opera, followed by mobileSafari, Now firefox 3 will be jumping on the bandwagan as well. However, as always, firefox offers some flexibility on top of that, if you still like the text only zooming as in firefox 2, just check view->zoom->text only

The zooming level of webpage is site-specific and enduring, that means :
  • if you zoom a webpage, other pages of the same website will be displaying at same zooming level you jut picked as well.
  • each webite has different zooming levels if you change them, e.g., you can have on tab 1 with zooming level of 100%, at the same time, you can have on tab 2 with 150% zooming level, at tab 3 with 75%, etc...
  • firefox will remember the zooming level for the websites, next time you visit it, firefox will diplay the pages with the zooming level you last time visited it. restart of firefox, or OS will not erase these settings (of course you can change it anytime you want by press cmd++, or view->zoom->reset/zoom in/zoom out)

You might consider a big TV display with bigger content now....

you can finally zoom pictures to larger than its real size with HIGH quality, ever find the image on the website too small? now you have it, on top of whole page zooming where all elements (including pictures) zoom together, even when you are viewing a single picture, zooming is till available!.

Whats more, this zooming is cairo enabled, vector based, which give you much higher quality when the picture got enlarged! Take a look at this comparison of firefox 3 and IE8's zooming (thanks vlad & johnathan, left is fx3, right is ie8).

4. Draggable elements (with ghost image) from anywhere to everywhere

Its one thing that these draggable stuff are funny, it another when you find some of them are particularly useful. I got a list for you to try out.

What to drag: pretty much everything (other than buttons in webpage, drop down menus, etc), including text, link, image, combination of texts+links+images, tab.

How to drag:

for image: click and drag
for text: select, click and drag
for link: click and drag
for combination: select, click and drag

where to and what would the result be? pretty much you can drag element(s) to anywhere in the browser, urlbar, search area, tab bar, tabs, input area in a webpage, etc, here are the details.
  • Drag link/image to free space of tab bar will loading the link/image in a new tab
  • Drag link/image to current tab will load the link/image in current tab
  • Drag link/image to other tab (active or not) will load link/image in that tab
  • Drag link/image/text to a text area of ANY tab (active or not) will write down the link/image-url/text in that text area. (specially useful when you posting, blogging, etc, IMHO)
  • Drag link/image to url bar will load link/image in current tab
  • Drag text to url bar will perform same function as normal url bar input (I will talk more about this url “awesome bar” next time).
  • Drag link/image/text to search area will perform instant search (result in current tab) of the link/image-url/text)
  • Above mentioned operation can be applied exactly the same when you drag them to another firefox window
There are more you can drag, try for yourself!

Coming Up next, Awesome Bar and Security in a Box

5. Awesome Bar

the location/address/url bar of firefox 3 is dubbed “awesome bar”, for some good reasons. Lets take a look at it.
One by one from left->right are: favicon, urlbar, RSS button, Quick Bookmark button, Dropdown History (downwards triangle)

Site info button (favicon), it displays site icon as firefox 2, but also provide security information with different colors, detail in next section.

Dropdown history, click to show your most visited 12 pages.

Star button, one click to bookmark current page!, click again to customize it: move to certain/new folders, remove it, add tag(s) (Tags can be a search term in your urlbar input)
click star!

click Again!

urlbar, here, it acts like a spotlight search for your history and bookmarks,

what you do: type in any number of strings (1-oo)

what firefox will response:

Perform instant search in your history and bookmarks looking for the matches from title bar of the page, url of the page, or the tags you assigned to your bookmarks when you added them. Sorted matches result according to the visit frequency.

Ever have 100, 200, 500+ bookmarks and can't find what you want from the list? No MORE!
Input tags you assigned to your bookmark

Input one term

Input two terms

Input 3 terms (bookmarks sorted higher than history, as you can see.

PS. You can ignore the matches results and just press enter after input, firefox 3 will just perform google and/or feeling luck like firefox 2.

no matter its your previously visited websites (history)
or its you interested websites (bookmarks)
even if you only remember part of the title of the page
even if you only remember part of the url of the page
even if you only remember the rough category you used (tags)

Type and spotlight, awesomebar is ready for you!

PS. urlbar still retain the function as a google feeling luck search field. e.g., type "caltech parking" in urlbar and press enter, you will be redirected to, (will goto a google search page if no sensible result can be found...)

6. Security in a Box

Security, are you worried? Firefox 3 is more secure than version 2. Take a look:

Click the site favicon in the location bar to see who owns the site and to check if your connection is protected from eavesdropping. Color is used to remind you the status of the current page.
Normal Color: no security method is used
Blue: Transfer of data with current webpage is encrypted with SSL, TLS, etc, the page is verified by network security firms
Green: Current page is certified by EV (Extended Validation)

PS. Click the favicon (any color, anytime) will give you more information about the website.
PS2. The Cop's name is Larry in case you want to know

Firefox 3 will display a warning page you when you try to visit dangerous websites such as:
sites which are known to install viruses, spyware, trojans or other malware.
pages suspected as web forgeries.
You can try them out at Here. and Here. If you dont want to try, Here is how it looks:

Firefox will inform anti-virus software to check the file after downloading executables (windows only).

Next to Come: Ease of use, Passwords and Download Manager.

Technorati Tags: , , , ,


Ron said...

And I thought I already knew FireFox!

Thanks for a really helpful post.

Jon said...

I'm hating the "awesome bar." I have about 20-ish websites I visit most frequently, and like to be able to just type ctrl+l and type the first few characters of the name and hit enter. I can't do that anymore. :(