Opera 7, FOUC, and Redrawing

Note: V7.2 has addressed most of the issues on this page, with both a user-defined delay, and no blanking of the page. Opera V7.2 has now become FINAL, and these issues have been addressed, so this page is only kept for historical reasons, nice job Opera!

Flash Of Unstyled Content (FOUC)

Opera7 has introduced a progressive rendering engine which constructs and rearranges the page as the various parts of the page are fetched from the web. Most interestingly, Opera chooses to display the content of the page before the CSS stylesheets have been downloaded, this is called the Flash Of Unstyled Content (FOUC). This make Opera the fastest browser to get 'raw content' from. The problem with this is that it depends on exactly what the page is, it works well when:

Other pages can be more problematic, as FOUC creates a horrible flash that doesn't serve any function if one didn't have time to read anything before the stylesheet came in. So the benefit of FOUC depends on the page itself. Additionally, it depends very much on the speed of your internet connection, as people on fast connections would rarely have any time lag between the HTML and CSS coming in, and wouldn't need to see one before the other.

After this, Opera like other browsers uses progressive rendering, and this then causes the page to 'reflow' as inline and other elements come in one by one. This can cause content to jump about (especially if people have failed to give dimensions to graphics). This is generally much more useful however as graphics take a much longer time than CSS files on average.

What Opera needs to Optimise FOUC

FOUC is good under specific circumstances, but different users have very different reactions to it. Because it depends on internet connection and user preference, Opera should put the time until which the raw content will be displayed. At the moment Opera does the following (quoted from Opera Developer Karl Anders Øygard):

O7 does not reflow while waiting for linked CSS, but if the style sheet does not appear within .5 seconds, it will go ahead anyway. This delay proved to be too small, so we bumped it up to 2 seconds.

When not waiting for CSS, it will attempt to reflow no more than five times per second. However, if you mouse over the document it has to reflow immediately, so if you move your mouse around in the document window while downloading, it's going to have to reflow as many times as you move your mouse (could be 50+ times per second).

The user should be able to specify this time, rather than it being fixed at 2 seconds. If set at -1, it should disable FOUC for those who dislike it.

Annoying Flash on Page Redraw

Another problem Opera7 has is that when redrawing upon navigating to a new page, even if the stylesheets and page graphics are in the cache, Opera blanks the screen white before it draws the new page.

To see this try browsing around this very wiki - every page flashes before being displayed (on a dial-up at least). This does not happen in Mozilla/Firebird. In Mozilla the user can specify how long the browser should wait before it first starts to draw the new page (default is 250milliseconds). Opera starts redrawing from time 0 apparantly, and blanks the screen waiting for content to come in, causing the ugly page flashing.

Again the solution is to provide a user defined time-delay till first redraw option, as is already possible in Mozilla ([user_pref("nglayout.initialpaint.delay", X] where X is the time delay).



There are 5 comments on this page. [Display and/or add comments]