按照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相关的那些操作的时间而已。如果面试的话,就是这么回答。