前端学习整理之——为什么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调用尽量放到网页底部?

赞 (1)
分享到:更多 ()

发表评论 0