作者eight0 ( )
看板Web_Design
标题Re: [问题] 把CSS或JS的import放在html最後端?
时间Wed Dec 31 17:05:53 2014
这问题就是把 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 时放前、
後的时间会差到哪去。大部份的时间都是卡在︰
1F：→ alog: 然後再怎麽快都没用，大部份卡在你的file 跟 domain name 12/30 01:00
2F：→ alog: 跟你那台server的位置决定大部份的速度 12/30 01:00
另外根据
如果要在 Chrome 内制造延迟载入效果，还是用 JavaScript 去做比较安全。
（我今天才知道！）
--
(*￣▽￣)/‧★*"`'*-.,_,.-*'`"*-.,_☆,.-*`
http://i.imgur.com/oAd97.png
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 111.251.41.141
※ 文章网址: http://webptt.com/cn.aspx?n=bbs/Web_Design/M.1420016757.A.736.html
※ 编辑: eight0 (111.251.41.141), 12/31/2014 17:06:21
4F：推 cyclone350: opera总是载入後重新render，应该是符合标准吧!? 12/31 23:34
5F：→ oj113068: 感觉这一串讨论该M。 01/03 14:04
6F：→ mmis1000: cyclone350，问题是script可能对css有依存性，不照顺序 01/03 15:52
7F：→ mmis1000: 可能会造成不可预期的结果 01/03 15:53