1. CSS should be placed above the structure (usually within the head element). CSS is an interpreted language, and Firefox and IE will not render anything until they wait for the CSS transmission to be completed. Only by prefixing CSS can the page be rendered when the browser parses the structure.
This causes the blank white screen problem. The page is totally blank until the stylesheet at the bottom is downloaded, on the order of 6-10 seconds for this page. The browser is waiting for the stylesheet to be loaded before it renders anything else in the page, even the static text.
The problem that leads to is that the page will be "simple" for a while, and suddenly it will be "gorgeous" again, and the user experience is very bad.
2. Try to use the style import method of <link rel=”stylesheet” href=”/” type=”text/css”>, and reduce the use of @import, and do not use multi-layer nested @import. Because in IE, @import is equivalent to placing <link> at the end of the page.
This is a valid syntax, but, even though it's in the document's HEAD, it breaks progressive rendering and instead causes the blank white screen and Flash of Unstyled Content problems.
This causes the blank white screen problem. The page is totally blank until the stylesheet at the bottom is downloaded, on the order of 6-10 seconds for this page. The browser is waiting for the stylesheet to be loaded before it renders anything else in the page, even the static text.
The problem that leads to is that the page will be "simple" for a while, and suddenly it will be "gorgeous" again, and the user experience is very bad.
2. Try to use the style import method of <link rel=”stylesheet” href=”/” type=”text/css”>, and reduce the use of @import, and do not use multi-layer nested @import. Because in IE, @import is equivalent to placing <link> at the end of the page.
This is a valid syntax, but, even though it's in the document's HEAD, it breaks progressive rendering and instead causes the blank white screen and Flash of Unstyled Content problems.