:

我沒有研究過這個，不過就推理(XD)的角度而言html和css應該要都載完才有辦法render不然你先render html 在畫面上，之後加上css屬性那不就會看到兩種畫面嗎，一開始的一閃而過接下來是有css的，以上純屬個人推測，所以我上一篇有說聽過js放底端沒聽過css，不過asp.net mvc的範例似乎也有把css放尾端的狀況出現 whatever..

其實我看好色龍的網誌，的確是會先閃過無CSS排版的畫面

的確有一些網頁會這樣..看了一下GOOGLE首頁，也是有些css放前面有些放後詳細的就需要再研究了以APPLE來講則是放在前面

Google的建議就是把畫面外的css塞尾端啊，這樣就算閃動也沒差，反正你又看不到，而且能更早產生第一個畫面，不會轉圈圈轉很久目前大部分瀏覽器都是 連線需要的時間 > 載入需要的時間> 重建render tree所需要的時間，多花一點時間重跑畫面很划算啊？就像你用jquryui做dialog，等他載入完再產生畫面根本沒意義，因為第一個畫面又沒dialog

所以重點在於 "畫面外"

怎麼可能沒關係...jquery ui的css九成以上在第一個畫面都不會用到的...但提前載入卻會bloack住整個畫面像是datapicker之類的，一開始都不會用到google的意思是 把雖然會用到，但不再第一個畫面裡的css放後面，或用headjs之類的塞進onload裡延後讀取

mmis 我懂你要表達的意思，但是教學的理論是必須整個CSS 及 DOM 讀完才可以 render, 而你卻的意思是讀到後就馬上可以做render了

實作問題，至少ff是可以在全部資源讀完前部分輸出的

而我的實驗是不論在前面或在後面都會 block 住...恩，我測測看 FF

fb也用了類似的trick來部分輸出，在第一個畫面只載入最少量資源，後面其他的再用js讀取好像是叫 bigpipe 的方法

我對 js 動態載入是沒有疑問的無法... 我的實驗是無法部分輸出的，還是有任何方式可以佐證瀏覽器可以部份輸出或是CSS放最後面會影響效能的文章? 或是哪一個有名的網站會把CSS放最後面?

開台南市公車動態的網頁看看就知道了http://goo.gl/Ny5tLc 開chrome，trolttoe選最慢的你會發現render沒有被jqueryui放最下面的css擋住照你的講法，就算放最下面也會擋住畫面輸出，但並不是

不管怎麼樣..以chrome做法是，不論dom有沒有loading完上面的渲染樣式 Chrome會按照CSS+Dom的狀況才會做渲染然後再怎麼快都沒用，大部份卡在你的file 跟 domain name跟你那台server的位置決定大部份的速度為了特定瀏覽器做了太多優化沒啥用，忘記真正的問題才可怕然後，你可以利用css backgroundimage 或 js的new Image來做 image buffer，讓其它頁面會需要的影像事先載入使用者在換一下個頁面時，他就不用再等待下載圖片了適用於一些會有換圖轉場、大型圖片檔案順便一提，CSS background image 做 buffer 蠻簡單的你可以把一個看不到的元素或超級迷你的div加入一組class這組class有你設定好的背景圖片最好那塊是在網頁上看不到然後把那組class擺在最後，而tag的部分也是擺在最後當系統載入差不多的時候，那塊部分就會被載入因為排版引擎從dom+css的樣式規則發現這個class有被使用於是他就開始載入/設定你那組元素的樣式，有檔案也會下載若只有單純在css裡面定義，排版引擎不會去碰那裡面的樣式最後我想說的是，不管放在上面還是下面，或者是外部載入或者是直接放在裡面，都有他的用意跟適合的情況各有優點及缺點，沒有特別王道

在我看來，他對 ie,ff,chrome 都有效就有使用價值了

要調校請以你那個網站的主使用者用的瀏覽器下去調

而且就算沒效你也沒損失阿

都有效歐...而且剛剛的回答就是追timeline的結果是throttle成 5kb/s 的速度測的

推a大background image舉例 很棒很實用

來個小測試吧，這是一個簡單的網頁，含有一個延遲很大的css檔案，只是一個放頭，一個放尾https://test-mmis1000.c9.io/normal.htmlhttps://test-mmis1000.c9.io/normal.htmlhttps://test-mmis1000.c9.io/normal1.html假設說這個css沒內容還是會擋住嗎？https://test-mmis1000.c9.io/emptycss.htmlhttps://test-mmis1000.c9.io/emptycss1.html

實測結果如果FX會讓HTML先出來再上CSS但是Chrome 會等CSS抓完再讓整個畫面一起出來

https://test-mmis1000.c9.io/normal1-chunk.html事實上chrome也會，但限transfer-encoding:chunked的網頁