之前有整理過一部分知識點, 一直沒有發(fā)布, 因為都是有關(guān) CSS 方面的零散內(nèi)容; 現(xiàn)在想想無論做什么都需要慢慢積累, 所以還是決定將之前整理的相關(guān)內(nèi)容驗證之后慢慢分享給你們, 現(xiàn)在看到感覺還挺有意思 椒惨。
1. 什么是 FOUC (無樣式內(nèi)容閃爍) ?
1. 我們在進行軟件項目開發(fā)時, 不知道大家有沒有發(fā)現(xiàn)過這樣一種奇怪的現(xiàn)象: 以無樣式顯示頁面內(nèi)容的瞬間閃爍锣尉；解釋來說呢, 就是在我們進入頁面時, 我們設置 CSS 樣式 "沒有生效", 過了那么一瞬間的時間, 我們設置的 CSS 樣式突然又有效果了, 即生效了; 這種現(xiàn)象稱之為" 文檔樣式短暫失效" (Flash of Unstyled Content), 簡稱為 FOUC 。
2. 產(chǎn)生 FOUC 的原因
1. 使用 import 方法導入樣式表 耙旦。
2. 將樣式表放在頁面底部 唆涝。
3. 有幾個樣式表, 放在 html 結(jié)構(gòu)的不同位置 找都。
3. 產(chǎn)生 FOUC 的原理
1. 當樣式表 'CSS' 晚于結(jié)構(gòu)性 'html' 加載, 當加載到此樣式表時, 頁面將重新渲染之前的頁面樣式 'css' 。 此樣式表被下載和解析后, 將重新渲染頁面, 也就出現(xiàn)了短暫的花屏(屏幕閃爍)現(xiàn)象 廊酣。
4. 解決方法
1. 使用 link 標簽將樣式表放在文檔 head 中 能耻。
2. 在 .html 文件中, 將樣式寫在 style 標簽中, 并且放置位置在 body 標簽之上 。
既然大家了解了 FOUC (無樣式內(nèi)容閃爍), 那么大家是否能夠聯(lián)想到 '白屏' 這種現(xiàn)象呢 亡驰？ 如果大家有興趣可以留言討論, 我將在之后的文章中, 給大家分享 '白屏' 的相關(guān)內(nèi)容 晓猛。
