Re: [問題] 把CSS或JS的import放在html最後端?

[eight0 ( )]

這問題就是把 CSS 放在 head 內與 放在 body 內的差別而已。

在 HTML4 之前，link 是規定要放在 head 內的，
到 HTML5 才有關於放在非 head 內的標準。

當放在 head 內時，瀏覽器會在 render body 前就先把 CSS parse 完，
所以在載入 CSS 前會把 render 擋住。這樣只需要 render 一次。

當放在 body 內時，瀏覽器會等 CSS parse 完後再重新 render，
也就是說，在 body 內放 N 個外連 CSS，瀏覽器就會 render N+1 次。

所以你可以根據狀況選擇，例如說對於行動產品，你可能希望 render
次數盡量少；對於其它特殊情況，你可能希望有些載入很久、又不影響
版面的 CSS 可以晚一點載入。

就我所知，不遵守這行為的瀏覽器有舊 Opera，它總是在載入 CSS 後重新
render（因為重繪超快？）；和上篇測試的 Chrome。

另外放 body 內，DOMContentLoaded 事件會在第一次 render，還沒載完
CSS 的時候就發動了，所以有些關於樣式的 JavaScript 效果可能會套用
不到。

當然這也包括 Opera，所以我記得 jQuery 在做 Opera 的 ready() 時，
還會特別去檢查 CSS 載入完成了沒。

> 因此如果你把 CSS 放在最後，瀏覽器越晚讀到，自然會越慢開始下載
> 而引響到 CSSOM 的建構，最後就會導致整體 Render Tree 建構的速度 delay。

嚴格來說這是對的，但是除非你的網站輸出很慢，我不覺得 parse html 時放前、
後的時間會差到哪去。大部份的時間都是卡在︰

→ alog: 然後再怎麼快都沒用，大部份卡在你的file 跟 domain name
→ alog: 跟你那台server的位置決定大部份的速度
另外根據

→ mmis1000: https://test-mmis1000.c9.io/normal1.html
如果要在 Chrome 內製造延遲載入效果，還是用 JavaScript 去做比較安全。
（我今天才知道！）

--
(*￣▽￣)/‧★*"`'*-.,_,.-*'`"*-.,_☆,.-*`

http://i.imgur.com/oAd97.png

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.251.41.141
※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1420016757.A.736.html
※ 編輯: eight0 (111.251.41.141), 12/31/2014 17:06:21
推 cyclone350: opera總是載入後重新render，應該是符合標準吧!?
→ oj113068: 感覺這一串討論該M。
→ mmis1000: cyclone350，問題是script可能對css有依存性，不照順序
→ mmis1000: 可能會造成不可預期的結果