如何避免FOUC（轉）

今天瞭解了一個新的名詞叫作 FOUC 瀏覽器樣式閃爍，以前也據說過一些相似的東西，好比樣式突變等等，但這東西居然有學名的。。

什麼是FOUC(文檔樣式短暫失效)?
若是使用import方法對CSS進行導入,會致使某些頁面在Windows
下的Internet Explorer出現一些奇怪的現象:以無樣式顯示頁面內容的瞬間閃爍,這種現象稱之爲文檔樣式短暫失效(Flash of Unstyled
Content),簡稱爲FOUC。

 

緣由大體爲：
1，使用import方法導入樣式表。
2，將樣式表放在頁面底部
3，有幾個樣式表，放在html結構的不一樣位置。

其實原理很清楚：當樣式表晚於結構性html加載，當加載到此樣式表時，頁面將中止以前的渲染。此樣式表被下載和解析後，將從新渲染頁面，也就出現了短暫的花屏現象。

解決方法：
使用LINK標籤將樣式表放在文檔HEAD中。