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

看板Web_Design作者eight0 ( )時間10年前 (2014/12/31 17:05)推噓1(1推 0噓 3→)

留言4則, 3人參與討論串3/3 (看更多)

這問題就是把 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

12/30 01:00,

12/30 01:00

→

alog

12/30 01:00,

12/30 01:00

另外根據

→

mmis1000

12/31 01:50,

12/31 01:50

如果要在 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