ps：以下内容僅僅為個人讀書筆記，如有錯漏，随時歡迎指正。同時希望能有更多的前端愛好者們共同分享你們的心得！
背景
閱讀《高性能網站建設指南》第五章，文章中，
作者建議最好将css檔案（樣式表）放在文檔頂部，即<head>标簽之間。當然這是在一定的應用前提之下的——該樣式表在頁面呈現時可能并
不需要，而是作用于由于使用者與頁面的互動行為而産生的動态标簽。比方說你點選某個顯示有“猛擊我吧！！”的連接配接，然後頁面彈出個div，用綠色字型和
24px的字号大小顯示的标準國罵來回敬你。樣式定義下：
1
2
3
4
<code><style type=</code><code>"text/css"</code><code>></code>
<code> </code><code>color</code><code>:</code><code>green</code><code>;</code>
<code> </code><code>font-size</code><code>:</code><code>24px</code><code>;</code>
<code></style></code>
上述樣式表在頁面最初顯示的時候并不需要，若将其放在<head>标簽間隻會延遲其他資源的下載下傳，于是yahoo！的工程師們就設想将其置于頁面底部，最後進行加載。
實踐證明，這種方法的确有助于提高頁面的加載速度，但是可能導緻頁面白屏或者fouc（無樣式内容閃爍問題），關于白屏、無樣式内容閃爍的了解可參考下面名詞解釋。下面是個人一點總結，分為ie浏覽器下和firefox浏覽器下：
一. firefox
樣式表位于頂部：頁面内容逐漸呈現
樣式表位于底部：
與頁面呈現内容無關：頁面内容逐漸
呈現與頁面呈現内容有關：出現無樣式内容閃爍
二. ie
樣式表位于頂部：逐漸加載
出現白屏：當重新加載頁面、将頁面設定為預設首頁并打開、在新視窗中打開頁面時出現
出現fouc：點選連結、鍵入url、使用書簽 打開頁面時
部分名詞解釋：
白屏（blank white screen）：在浏覽器和使用者等待位于底部的樣式表時，浏覽器會延遲顯示任何可視化元件，即所謂的白屏現象。
無樣式内容閃爍（fouc）：頁面在樣式表下載下傳解析之前，元件就已經逐漸加載顯示，當樣式表解析完成後，已經顯示的元件就要用新的樣式進行繪制，這就導緻所 謂的無樣式内容閃爍。
原因解釋：
在
firefox浏覽器裡，無論是将樣式表置于頂部還是底部，總是采用逐漸呈現的方式來加載元件（component）。是以，若樣式表不是最初頁面呈現所
必需的，則使用者使用者基本感覺不到有什麼差别（當然加載時間是不一樣的，最後會稍微再補充一下）；而當樣式表為頁面程式所必需的時候，則會出現無樣式内容閃
爍現象（不難想象那個過程）。
在internet
explorer裡，則稍微複雜一點。想象一下，如果現在頁面元件已經加載顯示完畢，但css樣式表一秒後才慢悠悠地加載解析完畢（這種極端情況很少會出
現，但的确有助于我們了解白屏出現原因），這個時候坐在計算機前的使用者就會發現原先顯示的頁面所呈現的方式跟最初見到的不一樣（也許正文字型顔色由黑色變
成了紅色，連結上面的下劃線離奇消失了）。這種使用者體驗其實是很差的，為了防止這種情況的出現，ie浏覽器會阻止頁面的逐漸呈現直至樣式表加載解析完畢，
然後頁面所有内容同時湧上計算機螢幕。不過貌似這種白屏現象的使用者體驗更差其實（不知道是出于什麼考慮采取了這種呈現方式）。不過出現白屏也是在具體情況
下才會出現，上面已經總結了三點，這裡不贅述。
建議：
将樣式表置于頂部<head>标簽之間，雖然加載時間略微變長，但是可以避免出現白屏或者無樣式内容閃爍現象。如果樣式表最初頁面内容呈現無關，則可以采取文檔加載完畢後再動态加載（post-onload download）的方式進行加載。（關于post-onload download技術會在接下來的讀書筆記裡面進行解釋）
ps：以上内容僅僅為個人讀書筆記，如有錯漏，随時歡迎指正。同時希望能有更多的前端愛好者們共同分享你們的心得！
![一位經驗豐富的前端開發人員因未能通過算法面試題而受人嘲笑[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)