按照HTML5标准中的HTML语法规则，如果在</body>后再出现<script>或任何元素的开始标签，都是parse error，浏览器会忽略之前的</body>，即视作仍旧在body内。所以实际效果和写在</body>之前是没有区别的。
为什么把 Script 标签放在 body 结束标签之后 html 结束标签之前？ - 贺师俊的回答 - 知乎
https://www.zhihu.com/question/20027966/answer/13727164
原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的这篇文章不错
综上所述，我们得出这样的结论：
CSS 不会阻塞 DOM 的解析，但会阻塞 DOM 渲染。
JS 阻塞 DOM 解析，但浏览器会"偷看"DOM，预先下载相关资源。
浏览器遇到 <script>且没有defer或async属性的 标签时，会触发页面渲染，因而如果前面CSS资源尚未加载完毕时，浏览器会等待它加载完毕在执行脚本。
所以，你现在明白为何<script>最好放底部，<link>最好放头部，如果头部同时有<script>与<link>的情况下，最好将<script>放在<link>上面了吗？
浏览器遇到 <script>且没有defer或async属性的 标签时，会触发页面渲染
这一点一直没注意到，就是说js是阻塞的其下面的dom的解析和渲染，其上面dom会先渲染
谈论资源的阻塞时，我们要清楚，现代浏览器总是并行加载资源。例如，当 HTML 解析器（HTML Parser）被脚本阻塞时，解析器虽然会停止构建 DOM，但仍会识别该脚本后面的资源，并进行预加载。
https://juejin.im/entry/59e1d31f51882578c3411c77
自己的理解：
css放在顶部，因为css不阻塞dom的解析，就可以先去下载css，同时下面解析dom，js放在底部就不阻塞dom的解析，碰到了底部的js后，就先渲染一次（此时要等css回来再渲染），再下载与执行js ，
最优的情况应该是，顶部加载首屏所必须的css，中间是首屏的dom，然后是首屏的js；再之后就是其他屏的css、dom、js；在不分屏的时候，js放在底部也会为了让dom都已构建出来能够操作dom了，
JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制
script标签的位置会影响首屏时间么？
如果script标签的位置在首屏范围以下，不影响首屏时间
即使你把script标签都放到底部，但script标签的存在终究是拖慢了首屏时间、DomContendLoad和loaded的时间。(先渲染了一部分dom是否还没有触发DomContendLoad)
css才是影响页面首屏时间的罪魁祸首，如果css太大，页面白屏的时间就长了，就是render tree被推迟了，所以如果css太大就需要把非首屏css也放到底部，js只不过是影响用户和js相关的那些操作的时间而已。如果面试的话，就是这么回答。
网友评论