[talk about what's ===Panels=== Using <panel> elements to float chrome UI over the main window leads to performance problems. In fact, any XUL element that creates a native OS window under the covers will slow things down. In Firefox, the awesomebar autocomplete list uses a <panel>. The autocomplete list was re-worked such that it was a <code><vbox></code> in the main <code><stack></code> and the results were dramatic. The list displays much faster. ===Showing/Hiding Elements=== Stacking two or more elements and then toggling the visiblilty of all but one element is a simple way to create a UI that changes based on a state. While useful, this showing/hiding process can be slow. Try to avoid if possible, or find other ways to achieve the same goal. The URLbar in Firefox is a good example. When displaying the current web page URL, it is a <code><description></code>. But when the user is typing a new URL, it is a <code><textbox></code>. The process of showing/hiding the elements was taking a noticeable amount of time, affecting the perceived page loading time. In Fennec, the URLbar is always a <code><textbox></code>. The <code>readOnly</code> property is toggled to create the "caption" mode. A similar situation occurred with the favicon indicator. Fennec initially used a <code><stack></code> holding two <code><image></code> elements - one for the throbber and another for the website’s favicon. Again, we were showing and hiding the images depending on situation. This time it was the <stack> that was the slow down. So it was removed and page loading appeared to complete a little faster. The two image elements were kept because the load time for the swapping the favicon image with the throbber image eclipsed any benefits of removing the show/hide code. ===Canvas and how Thumbnails=== As described above, Fennec copies the contents of a <code><browser></code> to the display <code><canvas></code>. Updating the contents of a browser to a canvas is not cheap on mobile devices. Each <code>drawWindow</code> call can take ~300-400ms. On the other hand, <code>drawImage</code> is much faster - ~100ms. Fennec uses <code>drawImage</code> whenever possible to update the tab thumbnails. Fennec also uses the MozAfterPaint event to optimize all DHTML updates to the the main canvas display surface. This minimizes the amount of <code>drawWindow</code> calls. We don't repaint the entire canvas. ===Post-Pageload Work=== Any work that occurs after the page loads is potentially bad for performance. Users like to start interacting with page content as soon as possible. Fennec even delays updating the web page favicon until the page finishes loading. ===File I/O=== Various places in the platform had file I/O code that was slowing Fennec down, usually on startup. Keep in mind, file I/O on mobile devices is usually measured in milliseconds. So try to avoid useless I/O whenever possible. Fennec startup improved from around it]30 seconds (yes) for a first-time, cold start in Alpha 1 to around 7-10 seconds in Alpha 2.
