你们知道JS放在head⾥和放在body⾥有什么区别吗？

胜玲龙

于 2025-05-20 21:36:48 发布

阅读量439

点赞数 6

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_40184218/article/details/148099155

将JavaScript 代码放在<head> 标签内部和放在<body> 标签内部有⼀些区别：

加载顺序：放在<head> ⾥会在⻚⾯加载之前执⾏JavaScript代码，⽽放在<body> 里会在页⾯加载后执⾏。
⻚⾯渲染：如果JavaScript代码影响了⻚⾯的布局或样式，放在<head> 可能会导致页面渲染延迟，⽽放在<body> ⾥可以减少这种影响。
代码依赖：如果JavaScript代码依赖其他元素，放在<body> ⾥可以确保这些元素已经加载。
全局变量和函数：放在<head> ⾥的JavaScript代码中的全局变量和函数在整个⻚⾯⽣命周期内都可⽤。
以下是⼀个简单的⽰例代码，展⽰了如何在<head>和 <body> 中放置JavaScript代码：

<!DOCTYPE html>
 <html>
 <head>
 <script console.log("这是在 head 中执⾏的 JavaScript 代码。");></script>
 </head>
 <body>
 <script console.log("这是在body 中执⾏的 JavaScript 代码。");></script>
 </body>
 </html>

在这个⽰例中，分别在<head>和 <body>中放置了简单的Javascript代码，用于在控制台输出信息，以便观察执⾏顺序。