FOUC
Posted: Tue Mar 15, 2011 7:05 pmI am sure everyone has experienced that momentary 'flash of white' when their web pages are loading.
FOUC stands for "Flash of Unstyled Content"
Since stylesheets and scripts cannot be d/l in parallel this phenomenon is seen when scripts are accessing parameter in the stylesheets that have yet to be completely installed or d/l AND this is very often seen in the loading of external stylesheets (never use this technique; it is bad technique) in doing such as this affects the rendering of the page therein stalls , waiting until the stylesheet is completely downloaded - that momentary 'white flash'.
This is why it is prudent to load the stylesheets early in the html document(within opening and closing element). Therefore to ensure or eliminate the 'FOUC' phenomenon the placement of the JavaScript files just above the closing body element is prudent so that the stylesheets d/l smoothly and without interruption(s). There are few circumstances where placing the JavaScript within the head element is more beneficial or effective.
We all know who the main conspirator here: namely, IE but that can be easily gotten rid of also by the addition of IE specific page transitions; and the better one to use is the 'gradient transition' IMHO.
How do you battle the issue of FOUC on your web site?
mapleleaf
FOUC stands for "Flash of Unstyled Content"
Since stylesheets and scripts cannot be d/l in parallel this phenomenon is seen when scripts are accessing parameter in the stylesheets that have yet to be completely installed or d/l AND this is very often seen in the loading of external stylesheets (never use this technique; it is bad technique) in doing such as this affects the rendering of the page therein stalls , waiting until the stylesheet is completely downloaded - that momentary 'white flash'.
This is why it is prudent to load the stylesheets early in the html document(within opening and closing element). Therefore to ensure or eliminate the 'FOUC' phenomenon the placement of the JavaScript files just above the closing body element is prudent so that the stylesheets d/l smoothly and without interruption(s). There are few circumstances where placing the JavaScript within the head element is more beneficial or effective.
We all know who the main conspirator here: namely, IE but that can be easily gotten rid of also by the addition of IE specific page transitions; and the better one to use is the 'gradient transition' IMHO.
How do you battle the issue of FOUC on your web site?
mapleleaf