为什么通常将 link 放置在 head 之间,script 放在 body 之后?
为什么将 CSS <link>
放置在 <head></head>
之间?
样式的加载不会阻塞后续元素的解析,所以当然是加载的越早越好。并且能防止部分浏览器出现无样式内容闪烁(FOUC)的恶心效果。
为什么 JS <script>
放置在 </body>
之后?
JS 的加载会阻塞后续 DOM 的解析,放在后面可以让用户第一时间看见完整的页面体验更好。而且一般 js 常常会操作 DOM,如果放在 head 里此时 body 上的 dom 元素尚未解析,只能监听事件在合适的时机再操作 dom 多此一举。
有没有例外的情况?
有些场景下比如需要尽早的做一些事情,比如移动端适配时修改 html 的 fontsize,此时可以放在 head 中越早越好。