Optimization of CSS loading methods on the page

1. Place CSS on the top of the structure (usually in the head element ). CSS is an interpreted language. Firefox and IE will not render anything before the CSS transmission is complete. The page can be rendered only when the structure is parsed by the browser.

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 is that the page will be "simple" for a while, and suddenly "gorgeous", the user experience is very bad.

2. Try to use the <LINK rel = "stylesheet" href = "http://www.planabc/yuanxin.css" type =" text/CSS "> style import method to reduce @ import usage, do not use multi-layer nested @ import. In IE, @ import puts <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.

Additional reading:

• Flash of unstyled content (fouc)