《高性能網站建設指南》規則五、6—將樣式表放在頂部、將腳本放在底部

規則5——將樣式表放在頂部

咱們發現將DHTML特徵的樣式表放在文檔頂部——head中——能使頁面加載得更快。

逐步呈現

關心性能的前端工程師都但願頁面能逐步地加載，爲用戶提供可視化的反饋是很重要的。

將樣式表放在文檔底部，瀏覽器爲避免當樣式變化時重繪頁面中的元素，瀏覽器會阻塞內容逐步呈現。瀏覽器延遲顯示任何可視化組件，就會出現「白屏「。

將CSS放在底部

在Internet Explorer中，將樣式表放在文檔底部會致使白屏的問題情形以下：
1.在新窗口中打開時
2.單擊刷新按鈕，在頁面加載時最小化而後恢復窗口就能看到白屏。
3.設置爲主頁打開新的瀏覽器窗口時

將CSS放在頂部

若將樣式表放在文檔頂部的HEAD中，頁面都是逐步呈現的

關於Link標籤和@import規則

<link rel="stylesheet" href="styles1.css">

<style>
@import url("styles2.css");
</style>

一個style塊能夠包含多個@import規則，但必須放在因此其餘規則以前。同時@import規則有可能會致使白屏，即便是放在HEAD標籤中。使用@import有時會致使組件下載的無序性。

無樣式內容的閃爍

白屏現象源自於瀏覽器的行爲。若是樣式表仍在加載，構建呈現樹就是一種浪費，由於在全部樣式表加載並解析完畢以前顯示內容會遇到FOUC(無樣式內容的閃爍，Flash of Unstyled Content)問題

白屏是對FOUC問題的彌補。

IE在前面介紹的情形中會選擇白屏，在單擊連接、使用書籤或鍵入URL會選擇第二種方式——承擔FOUC風險。

規則6——將腳本放在底部

腳本帶來的問題

腳本會阻塞並行下載。

並行下載

HTTP1.1規範，建議瀏覽器從每一個主機名並行下載兩個組件。固然這個在瀏覽器上是能夠從新配置的。使用CNAME（DNS別名）能夠將組件放在多個主機中。增長並行下載並不是沒有開銷，取決於帶寬、CPU速度，過多的並行下載反而會下降性能。

腳本阻塞下載

在下載腳本時並行下載實際是被禁用的，其中一個緣由是腳本可能會使用document.write來修改頁面內容，所以瀏覽器會等待，以確保頁面可以恰當的佈局。

另外一個重要的緣由是保證腳本可以按照正確的順序執行。

最差狀況：將腳本放在頂部

影響：

1. 腳本會阻塞對其後面內容的呈現
2. 腳本會阻塞對其後面組件的下載

正確地放置

在不少狀況下，很難將腳本移到底部。例如，若是腳本使用document.write向頁面中插入了內容，就不能將其移動到頁面中靠後的位置。此外還會有做用域問題。不少狀況下，能夠用其餘方法解決這些情形。

常常出行的另一種建議是使用Defferred腳本。DEFER屬性代表腳本不包含document.write,瀏覽器獲得這一線索能夠繼續呈現。可是在firefox中即便是延遲腳本也會產生阻塞。若是一個腳本能夠延遲，那麼它必定能夠移到頁面底部，這是最佳方式。

參考

1. 《高性能網站建設指南》