前端学习整理之——为什么JS调用尽量放到网页底部？

渲染引擎逐行解析HTML，为了尽快将页面呈现出来，它不会等到HTML都被解析完才创建并布局Render Tree。它会在处理后续内容的同时把处理过的局部内容先展示出来。
虽然浏览器对资源的加载是可并行的，当遇到script标签（调用外部JS）时便开始下载，下载完毕调用JS引擎进行执行，然而，JS引擎是单线程的，因此JS的执行必定会对DOM Tree的构建造成阻塞。
了解了以上内容后，对该问题进行解答：为什么JS调用尽量放到网页底部？

1 JS的下载和执行会阻塞DOM Tree的构建，对于在首屏范围内的HTML代码段里的script标签会截断首屏内容，造成首屏大片空白从而影响网站的用户体验。

2  如果JS中有对DOM的操作并且没有把这部分代码放入document.ready接口内，那么，当JS执行的时候DOM 可能还未加载完，这样便会出错。比如：对按钮绑定点击事件 这时候按钮还没被渲染出来 对他绑定就会出现问题

（这里的首屏时间指的是浏览器第一次painting的时间。首屏内容的显示可以是不完整的。）

在学习这些文档过程中，遇到了很多不能理解的点：

1 为什么script标签的位置不一定会影响首屏时间。

对于顶部的script，肯定会阻塞之后的内容加载，这种情况下一开始的空白时间会变长啊，在这段时间内浏览器有过painting了吗？浏览器的第一次painting到底取决于什么？

2 为什么放到网页顶部的JS不一定阻塞页面渲染

这句话说的意思和1中说的是一个意思吗？

3

除了首屏看得见的资源（主要是图片资源）外，其他资源一律需要通过js来控制，而不能随意地发起http请求（包括首屏看不到的资源）。按照这个原则，js只能放在body标签闭合之前，并且js逻辑不能随意书写！

js对其他资源的控制包含对DOM的控制吗，所以只能放在body底部？

欢迎分享本文，转载请保留出处：前端ABC » 前端学习整理之——为什么JS调用尽量放到网页底部？