＜script＞标签写在head和写在body中有什么区别

最新推荐文章于 2024-05-02 14:26:53 发布
最新推荐文章于 2024-05-02 14:26:53 发布
阅读量5.3k 收藏 2
点赞数
分类专栏： vue 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42584411/article/details/126418766
版权

总看到有的内容要写在head中有的内容要写到body，，，那么究竟这样写有什么区别呢？

答案

不管写在哪里这个脚本都会执行，只不过就是加载顺序的问题

放在body中：在页面加载的时候被执行
放在head中：在被调用时被执行

猛的一看好像什么都说了，，又好像什么都没说。细细品味一下就发现

解惑

我们都知道浏览器是从上到下解析HTML的放在head里的js代码，会在body解析之前被解析；放在body里的js代码，会在整个页面加载完成之后解析。知道这个就好理解多了，，

就比如说如果你想在页面加载之前或者是页面没加载就执行一个脚本，那么写在head中就比较好。

另外如果你只是加载页面需要用到一些依赖，，如你用到了jquery，这个都是渲染页面需要用到的，这个时候你放在body里面最合适。。

蓝奕世
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript标签在页面中的位置探讨
12-09
在制作网页的过程中，我们经常写类似下面的代码： [html] 代码如下: <html> <head> <title>Example HTML Page</title> [removed][removed] [removed][removed] </head> <body> <!– 这里放内容 –> </body> </html> <html> <head> <title>Example HTML Page</title> <scrip
JS代码放在head和body中的区别分析
12-10
那么有什么不同呢？先看一个例子： 一个二级级联动态下拉列表框，一级分类（即大类别）id=”vSort0″. 代码如下: <head> function changelocation(id) {…………} </head> <body><select class...
Js代码用 script 调用时，放在head与body的区别
热门推荐
Yoghurt的博客
07-21 2万+
在系统性的学习一遍html5/css3/javscript过程中，又遇到了之前看到过的一个问题：&lt;script&gt;放在&lt;head&gt;和&lt;body&gt;到底有什么影响和区别。大多数人一定跟我一样，当时百度了一下，基本就得到一个概念性的回答：基本都一样，只是浏览器加载顺序是从上到下，放在head中时，会在页面加载之前加载到浏览器里，放在body中时，会在页面加载完成之后读取...
script标签放在head标签与body标签中的区别
qq_43635212的博客
03-28 1613
html代码是从上往下依次执行,<script>放在<head>中时，会在页面加载之前加载到浏览器里，放在<body>中时，会在页面加载完成之后读取。 所以：在head中checkInput1 为undefined，而在body的script标签中checkInput2为Object <html> <head> <tit...
JavaScript在head和body中加载的区别（含相关变量初始化问题）及原生js的解决方法
m0_53163870的博客
02-20 1276
  JavaScript在加载head和body时有很多不同的地方，当把Script标签放到开头的head里会发现与在body末尾的Script标签有很大的区别。 一、相对于对body标签而言，head标签的js不同   由于html的加载顺序为从上到下运行，会先解析head标签中的代码。   而head标签中会包含一些引用外部文件的代码，从开始运行就会下载这些被引用的外部文件当遇到script标签的时候，浏览器暂停解析（不是暂停下载），将控制权交给JavaScript引擎（解释器）   如果 < s
script 标签放在 head 里和放在 body 底部里的区别
前端小白的博客
12-30 462
这可能会阻塞页面的渲染，因为浏览器必须等待脚本加载和执行完成后才能继续构建 DOM 树。相反，将脚本放在 底部会使浏览器先渲染页面内容，然后再加载和执行脚本，避免了阻塞渲染的情况。中可以确保在加载和执行脚本之前已经加载了所需的资源。但对于某些特定情况，如需要在页面加载前执行特定操作或有明确的依赖关系时，将脚本放在。中时，浏览器必须在加载脚本前先下载并执行它们，这可能导致页面加载时间延长。：如果脚本依赖于页面的其他资源（如 CSS、图片等），将脚本放在。底部并仍然控制脚本的加载顺序和依赖关系。
script在head和在body中的区别
qq_43654065的博客
01-19 3526
转载：原博文 加载的顺序不一样，html是从上往下加载的。如果在网速慢的情况下把js代码放在body底部用户会先看到网页结构，等js加载完成后才出现特效。 区别： 在HTML body部分中的JavaScript会在页面加载的时候被执行。 在HTML head部分中的JavaScripts会在被调用的时候才执行，但是在主页和其余部分代码之前预先装载。 1. JavaScript应放在哪里 head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部
描述一下脚本＜script＞放在＜head＞和放到＜body＞底部的区别
欣欣酱博客
02-20 2763
------- 放<head>中的情况：脚本会优先加载，但加载过程中，<body>还没加载完，会使脚本访问不到<body>中的元素。 放<body>底部：脚本在<body>加载后加载，能够保证脚本有效地访问<body>的元素。 ------- html渲染执行的顺序为从上到下的一个执行顺序，首先第一步执行head中的内容，如果有外联样式，则下载外联样式，如果有script标签，那么浏览器的渲染引擎则停止，交给JavaScript引
＜script＞放在head内和body内的区别
Q1368089323的博客
12-13 2236
1.区别简述： 在HTML body部分中的JavaScripts会在页面加载的时候被执行。 在HTML head部分中的JavaScripts会在被调用的时候才执行，但是在主页和其余部分代码之前预先装载。 加载的顺序不一样，你可以把ＨＴＭＬ看成从上往下加载的。 例如在网速慢的情况下把ｊｓ代码放在ｂｏｄｙ底部用户会先看到网页结构，等ｊｓ加载完成后才出现特效 2.JavaScript的位置 head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分
把Script标签放在页面最底部的＜/body＞之前和之后有什么区别？浏览器会如何解析它们？
weixin_47450807的博客
02-21 3485
如果把script标签放在</body>之前，则浏览器加载时会阻塞其他资源，如果放到</body>标签之后，则不会阻塞资源。 因为如果放在</body>标签之前，则浏览器当解析到script标签时会暂停html的解析（因为不知道在js中会不会操作DOM，故此中断)。如果放在</body>标签之后，则浏览器当解析到script标签时不会出现阻塞，但是可能当用户操作DOM时，js没有响应(因为不存在阻塞现象，当页面展示出来时，js可能还没有加载完毕)。 在HTML
js原生跨域_用script标签的简单实现
01-21
作为新手,就写一下简单的吧,院子里面有很多大牛, 说句实话,他们的很多代码我都看不懂. 我就写一下新手看的懂得吧, 多说一句,我觉得大牛写的代码应该通俗易懂才可以。. 代码非常的简单,但是写的过程中,仍然发生了一些...
jquery获得同源iframe内body下标签的值的方法
12-10
test.html Html代码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery</title>...script type="te
Web前端开发技术-JavaScript代码编写.pptx
07-07
内嵌式（嵌入式）：使用<script>标签包裹JavaScript代码，<script>标签可以写在<head>或<body>标签中 外部式（外链式）：将JavaScript代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML页面中使用...
element-ui的bug记录
nick_zhang的博客
04-29 378
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
【Web】CTFSHOW 中期测评刷题记录(1)
最新发布
uuzeray的博客
05-02 1057
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
判断前端入参是否空否则提示前端写法
qq_39306234的博客
04-28 271
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
前端调用WebSocket协议接口获取数据
m0_56023096的博客
04-29 259
createWs("测试数据", (res) => {
2024 XYCTF Web 方向 wp 全解
qq_39947980的博客
04-27 1064
XYCTF 2024 Web 方向全解
<script>标签放在<head>和<body>的区别
05-17
将<script>标签放在<head>标签中，意味着脚本将在页面加载之前被执行，因此它们可以用来定义全局变量、函数、样式表和初始化代码等。但是，如果脚本依赖于页面的元素，例如DOM元素或其他外部资源，那么放在<head>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值