计算机代码中啥只能放在body里面不能放在script里面

Posted 2023-04-30

计算机代码中什么只能放在body里面不能放在script里面，通常我们在开发html时，通常将script标签放到body标签下面，那原因到底是为什么呢？

js代码在载入完后，是立即执行的。

Document
var item = document.getElementById("item");

console.log(item); //null

我是html结构，我要展示到页面上！

通过这个简单的例子我们可以看到，js代码在加载完后，是立即执行的，执行完后，body才开始解析渲染，所以是找不到item，所以为null。

js代码执行时会阻塞页面渲染(由于GUI渲染线程和js引擎线程互斥。具体原理可以看这)

Document
while (true)
console.log(1);



我是html结构，我要展示到页面上！

测试结果，浏览器一直处于加载过程，一会就卡死了。html整个结构(包括html标签)都无法渲染出来。js的下载和执行会阻塞Dom树的构建。

86250c123e53

1523429832(1).jpg

所以，我们一般采用以下方法

将所有的script标签放到页面底部，也就是body闭合标签之前，这能确保在脚本执行前页面已经完成了DOM树渲染。

如果放在上面，将js包裹在$(document).ready(function())或者$(function())里面

,或者window.οnlοad=function()里面。

具体这几句代码什么意思，可以看一下文章

ready和onload的区别 参考技术A 因为，计算机代码中body，和计算机代码是同一个程序兼容，可以点缀，点缀之后就可以用计算机代码放在body里面了，而script，和计算机代码不兼容，所以不能放在计算机代码里面，如果计算机代码放在script，里面代码就会出错，出错之后计算机就不能用了，所以计算机代码中只能放在body 参考技术B 以下对js代码放在head和body中的区别进行具体解释：
1.放在head中，则script在页面加载之前就有了，分情况，
　　如果script块中是js执行代码，则相当于实际行为顺序执行（不可逆），但组装赛车只有零零散散的零件陆陆续续的到货，并没有完全到货，导致某些实际行为需要操作的零件找不到，即组装赛车的某些关键步骤被省略了。
　　如果script块中是js函数，则相当于指导手册先于组装赛车先到货，因为只是书面的指导手册，没有实际执行什么行为，所以最终不会有实际行为的缺失。
2.放在body中，则script在页面加载之后才有，同样分情况，
　　如果script块中是js执行代码，因为此时组装赛车的所有零件都已经到货了，所以按实际行为来操作，所有行为都可以成功的执行。
　　如果script块中是js函数，则相当于组装赛车先到货，指导手册后到货，之后按照指导手册进行零件拼装即可成功组装成赛车，同样不会有实际行为的缺失。
所以，如果页面引入的是js函数，那么不管置于head还是body中，都没有区别。
但是如果是js执行代码，那就要考虑dom节点是否存在的情况了

实训9.4.前端：js script放在head跟body里面的区别

 

1. 在head中时，所代表的functions只加载而不执行，执行是在某一事件触发后才开始。
2. 在body中时，直接加载并执行
3. 典型区别：如果有不在函数中的执行语句，比如变量初始化，如果在head中就不会执行。