現代瀏覽器，漸進式渲染anc CSS底部

目前，我正在研究幾個提示/建議以提高網站的性能。所以，我已經開始使用Steve Souders的優秀書籍（高性能網站和更快的網站），但是我提出了一些關於所提出的一些規則的問題。例如，高性能網站的第5章說CSS樣式表應放在頁面的頂部，因爲將它們放在底部會停止瀏覽器執行的漸進式渲染。據史蒂夫介紹，一些瀏覽器（最着名的是IE）確實遇到了問題，並且顯示了一個空白頁面，而不是逐步顯示這些項目。以下是該測試頁的網址： http://stevesouders.com/hpws/css-bottom.php 現代瀏覽器，漸進式渲染anc CSS底部

現在，我明白我們正在談論一本幾年前的書，並且瀏覽器（包括IE）已經更新和改進。我問這個問題的原因是因爲我無法複製他提到的任何FF，Chrome或IE版本的行爲。

那麼，事情是雅虎（http://developer.yahoo.com/performance/rules.html#css_top）和谷歌（https://developers.google.com/speed/docs/best-practices/rendering#PutCSSInHead）仍然這樣說。

那麼，我想知道的是，如果瀏覽器已經在這個領域發展，並且這隻對IE 8有問題？如果是這樣的話，爲什麼沒有雅虎和谷歌更新他們的建議？（順便說一句，我試圖從IE11模擬IE7，仍然沒有看到預期的結果，在書中描述...）

* UDPATE *最後一個注：我決定在asp.net中重現Steve的cgi腳本，並且創建了一個簡單的通用處理程序，它與sleep.cgi腳本具有相同的功能。我在這裏看到的是，在書中放置一個樣式表引用（需要一些時間來加載 - 我已經用了10秒）最終產生了本書中報告的空白頁問題。如果放到最後，瀏覽器最終會渲染所有內容，並在加載後應用樣式第二遍。在我看來，這是有道理的，因爲當你把樣式放在header元素中時，瀏覽器會保持到它在呈現之前得到樣式爲止（注意其他引用的組件仍然在後臺下載，但它們不是顯示在屏幕上）。另一方面，當它們位於底部時，瀏覽器將簡單地應用當前樣式，直到它停留在樣式表中。當發生這種情況時，它只會顯示它已經加載的html，直到樣式表（如果它下面有任何圖像，瀏覽器仍然會下載它們，但只會在樣式被加載後纔會顯示它們）。

那麼，這些測試之後，我開始認爲，1）我在這裏失去了一些東西或2），雅虎和谷歌的建議不再有效今天。

想法？

謝謝你們！

來源

2013-10-28 Luis Abreu

我是正確的，你考慮FOUC http://en.wikipedia.org/wiki/Flash_of_unstyled_content理解*希望*如果這意味着你最終得到更快的頁面加載？（我認爲這是一個有效的方法，只是它通常被認爲是不可取的......） – yochannah

不，這不是我的觀點。我要說的是，雅虎/谷歌推薦和史蒂夫書籍中描述的行爲不再正確，即將樣式表放在底部，暫停漸進式渲染，你會看到一個空白頁面。事實上，我已經得到了相反的結果，也就是說，如果我將樣式表放在頁面的頂部，並且樣式表需要10秒鐘才能下載，那麼這就是最終獲取所提及的空白頁面的時間高性能的網站。據我所知，FOUC不好，但我只是在尋找事實...... –

啊，那麼加載頁面的最佳實踐的討論就更少了，還有更多的是否存在空白頁面的問題？ – yochannah

只需在頁腳中插入<link>標籤不是推遲樣式表的方式。目前公認的方法是使用JavaScript來重視它：

<script> 
function loadStyleSheet(e){if(document.createStyleSheet)try{document.createStyleSheet(e)}catch(t){}else{var l;l=document.createElement("link"),l.rel="stylesheet",l.type="text/css",l.media="all",l.href=e,document.getElementsByTagName("head")[0].appendChild(l)}}loadStyleSheet("/your/stylesheet.css"); 
</script>

優化你的網頁速度包括確定CSS是倍以上的東西，在頭內聯的那部分，然後再使用上面的方法加載的主要樣式。

我建議您做一些搜索「上面的CSS」，並檢查出Google Pagespeed Insights。

https://developers.google.com/speed/pagespeed/insights/

來源

2014-10-14 16:46:54 mz3

現代瀏覽器，漸進式渲染anc CSS底部

回答

相關問題