回想一下

在最开始写前端的时候是把script放到head里的

后来随着岁月流逝,时间推移,大概是看到许多许多的人说要把script放到body标签结束之前的那个位置

后来有人,,,把他放到body外边了…我大概是跟不上社会的发展了,,,后来看大家说这个是不好的,或者不太正确的,所以我也就不纠结了

惨啊

好好看一下
这一段超赞(从第一个参考链接抄出来的)
浏览器的渲染过程

Create/Update DOM And request css/image/js：浏览器请求到HTML代码后，在生成DOM的最开始阶段（应该是 Bytes → characters 后），并行发起css、图片、js的请求，无论他们是否在HEAD里。
注意：发起 js 文件的下载 request 并不需要 DOM 处理到那个 script 节点，比如：简单的正则匹配就能做到这一点，虽然实际上并不一定是通过正则：）。这是很多人在理解渲染机制的时候存在的误区。

Create/Update Render CSSOM：CSS文件下载完成，开始构建CSSOM

Create/Update Render Tree：所有CSS文件下载完成，CSSOM构建结束后，和 DOM 一起生成 Render Tree。

Layout：有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置。

Painting：Layout后，浏览器已经知道了哪些节点要显示（which nodes are visible）、每个节点的CSS属性是什么（their computed styles）、每个节点在屏幕中的位置是哪里（geometry）。就进入了最后一步：Painting，按照算出来的规则，通过显卡，把内容画到屏幕上。

以上五个步骤前3个步骤之所有使用 “Create/Update” 是因为DOM、CSSOM、Render Tree都可能在第一次Painting后又被更新多次，比如JS修改了DOM或者CSS属性。

DOM：Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM。
CSSOM：CSS Object Model，浏览器将CSS代码解析成树形的数据结构
Render Tree：DOM 和 CSSOM 合并后生成 Render Tree(Render Tree 和DOM一样，以多叉树的形式保存了每个节点的css属性、节点本身属性、以及节点的孩子节点，display:none 的节点不会被加入 Render Tree，而 visibility: hidden 则会，所以，如果某个节点最开始是不显示的，设为 display:none 是更优的。

看完之后还是一脸懵逼

然后又看到了第三篇的文章中说道,第一篇文章中受到争议的部分,于是又是读啊读
这个第三篇文章超赞

浏览器不是解析一个标签就绘制显示一次，当遇到阻塞或者比较耗时的操作的时候才会先绘制一部分解析好的。

看完了参考资料
得出来一个结论我还是放到后面吧

参考

https://segmentfault.com/a/1190000004292479 (另外阔以关注一下这个人的blog,整个内容比较赞)
https://www.zhihu.com/question/20027966 (为什么把 Script 标签放在 body 结束标签之后 html 结束标签之前)
https://segmentfault.com/a/1190000007766425#articleHeader2

推荐

JavaScript DOM 编程艺术