＜script＞放在head内和body内有什么区别

最新推荐文章于 2023-09-23 13:39:52 发布
最新推荐文章于 2023-09-23 13:39:52 发布
阅读量431 收藏 2
点赞数
分类专栏： javascript
原文链接：https://www.cnblogs.com/xiangkejin/p/6411792.html
版权

加载的顺序不一样，你可以把HTML看成从上往下加载的。

例如在网速慢的情况下把js代码放到body底部用户会先看到网页结构，等js加载完成后才出现特效。

区别简述:

在HTML body部分中的JavaScripts会在页面加载的时候被执行。

在HTML head部分中的JavaScripts会在被调用的时候才被执行，但是在主页和其余部分代码之前预先装载。

1.JavaScript应放到哪里

head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载，

从而可使代码的功能更强大； 比如对*.js文件的提前调用。 也就是说把代码放在<head>区在页面载入的时候，就同时载入了代码，你在<body>区调用时就不需要再载入代码了，速度就提高了，这种区别在小程序上是看不出的，当运行很大很复杂的程序时，就可以看出了。

<html>
<head>
<script type=”text/javascript”>
….
</script>
</head>

body 部分中的脚本: 当页面被加载时立即执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。

<html>
<head>
</head>
<body>
<script type=”text/javascript”>
….
</script>
</body>

body 和 head 部分可同时有脚本:你可在文件中放无数的脚本，因此你的文件中可以在body和head部分同时存在脚本。

<html>
<head>
<script type=”text/javascript”>
….
</script>
</head>
<body>
<script type=”text/javascript”>
….
</script>
</body>

2.如果把javascript放在head里的话，则先被解析,但这时候body还没有解析。

（常规html结构都是head在前，body在后）如果head的js代码是需要传入一个参数（在body中调用该方法时，才会传入参数），并需调用该参数进行一系列的操作，那么这时候肯定就会报错，因为函数该参数未定义（undefined）。

  1. $(document).ready(function(){  
  2. //执行代码  
  3. })  

3.从JavaScript对页面下载性能方向考虑：由于脚本会阻塞其他资源的下载（如图片等）和页面渲染，直到脚本全部下载并执行完成后，页面的渲染才会继续，因此推荐将所有的<script>标签尽可能放到<body>标签的底部，以尽量减少对整个页面下载的影响。

zhangge3663
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS代码放在head和body中的区别分析
12-10
那么有什么不同呢？先看一个例子： 一个二级级联动态下拉列表框，一级分类（即大类别）id=”vSort0″. 代码如下: <head> function changelocation(id) {…………} </head> <body><select class=”input1″ id=”vSort0″ name=”vSort0″ onChange=”changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value);” style=”width:100px;”>……省略……</sele
JavaScript动态添加css样式和script标签
12-10
当`<script>`标签被添加到`<head>`或`<body>`后，浏览器会异步下载指定的JavaScript文件，并在下载完成后执行其中的代码。 **注意事项：** 1. **异步加载：** 动态添加的`<script>`标签默认是异步加载的，这意味着...
描述一下脚本＜script＞放在＜head＞和放到＜body＞底部的区别
欣欣酱博客
02-20 2908
------- 放<head>中的情况：脚本会优先加载，但加载过程中，<body>还没加载完，会使脚本访问不到<body>中的元素。 放<body>底部：脚本在<body>加载后加载，能够保证脚本有效地访问<body>的元素。 ------- html渲染执行的顺序为从上到下的一个执行顺序，首先第一步执行head中的内容，如果有外联样式，则下载外联样式，如果有script标签，那么浏览器的渲染引擎则停止，交给JavaScript引
script标签放在head标签与body标签中的区别
qq_43635212的博客
03-28 1630
html代码是从上往下依次执行,<script>放在<head>中时，会在页面加载之前加载到浏览器里，放在<body>中时，会在页面加载完成之后读取。 所以：在head中checkInput1 为undefined，而在body的script标签中checkInput2为Object <html> <head> <tit...
script在head和在body中的区别
qq_43654065的博客
01-19 3566
转载：原博文 加载的顺序不一样，html是从上往下加载的。如果在网速慢的情况下把js代码放在body底部用户会先看到网页结构，等js加载完成后才出现特效。 区别： 在HTML body部分中的JavaScript会在页面加载的时候被执行。 在HTML head部分中的JavaScripts会在被调用的时候才执行，但是在主页和其余部分代码之前预先装载。 1. JavaScript应放在哪里 head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部
Js放在head和body中的区别
Caster_Saber的专栏
02-21 3182
在HTML body部分中的JavaScripts会在页面加载的时候被执行。 在HTML head部分中的JavaScripts会在被调用的时候才执行。 一、区别 浏览器解析html是从上到下的。 如果把javascript放在head里的话，则先被解析,但这时候body还没有解析，所以会返回空值。一般都会绑定一个监听，当全部的html文档解析完之后，再执行代码： windows.onl
基于script标签引入vue.js
08-21
接下来，在`<script>`标签内，我们创建了一个Vue实例，并将其挂载到ID为`app`的DOM元素上，数据对象`data`包含了我们想要显示的信息。 Vue.js的核心特性包括： 1. **响应式数据绑定**：Vue.js使用`v-bind`指令实现...
如何在标题栏显示框架内页面的标题
10-31
<head> <title>页面A的初始标题</title> </head> <body> <iframe width="100%" height="100%" frameborder="0" scrolling="no" src="页面B.html"></iframe> </body> </html> ``` 在这个例子中，`<iframe>`元素...
<jQuery>导航的滚动锚点
04-09
1. **引入jQuery库**：确保你的HTML文件中包含了jQuery库，通常通过在`<head>`标签内添加`<script>`标签从CDN（内容分发网络）获取，例如：`<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>`...
＜script＞元素放在＜head＞元素中与放在＜body＞元素中页面内容的后面的区别
GCSDZQ的博客
09-19 213
放在开头： 意味着必须要等到全部JavaScript代码都被下载，解析和执行完成以后，才能开始呈现页面的内容。对于需要很多JavaScript代码的页面来说，就会导致浏览器在呈现页面时出现明显的延迟，延迟期间浏览器窗口是一片空白。 放在后面：在解析包含JavaScript代码之前，页面的内容将完全呈现在浏览器中，用户也会因为浏览器显示空白窗口的时间缩短感到打开页面的速度加快了。 ...
实训9.4.前端：js script放在head跟body里面的区别
diuxun9622的博客
09-05 152
在head中时，所代表的functions只加载而不执行，执行是在某一事件触发后才开始。 在body中时，直接加载并执行 典型区别：如果有不在函数中的执行语句，比如变量初始化，如果在head中就不会执行。 转载于:https://www.cnblogs.com/xtxt1127/p/11470216.html...
Js代码用 script 调用时，放在head与body的区别
热门推荐
Yoghurt的博客
07-21 2万+
在系统性的学习一遍html5/css3/javscript过程中，又遇到了之前看到过的一个问题：&lt;script&gt;放在&lt;head&gt;和&lt;body&gt;到底有什么影响和区别。大多数人一定跟我一样，当时百度了一下，基本就得到一个概念性的回答：基本都一样，只是浏览器加载顺序是从上到下，放在head中时，会在页面加载之前加载到浏览器里，放在body中时，会在页面加载完成之后读取...
js放在head里和body里的差别
samwangzhibo
10-17 1038
1，在head中时，所代表的functions只加载而不执行，执行是在某一事件触发后才开始。 2，在body中时，直接加载并执行典型的区别：如果有不在函数中的执行语句，比如变量初始化，如果在head中就不会执行。例如：html>      head>      title>第一个Html5视频测试title>          script type="text/javascript">   
script 写在body和head中的区别
m0_51865787的博客
10-31 470
script 写在body和head中的区别 区别简述： 在HTML body部分中的JavaScripts会在页面加载的时候被执行。 在HTML head部分中的JavaScripts会在被调用的时候才执行。 —————————————————————————— JavaScript应放在哪里 head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。 body 部分中的脚本: 当页面被加载时立即
css面试点-script标签写在body和head中的区别
wfly blog
11-18 1719
javascript代码写在<head>里面： 由于这时候网页主体（body）还未加载，所以这里适合放一些不是立即执行的自定义函数，立即执行的语句则很可能会出错（视浏览器而定） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit...
把Script标签放在页面最底部的＜/body＞之前和之后有什么区别？浏览器会如何解析它们？
weixin_47450807的博客
02-21 3837
如果把script标签放在</body>之前，则浏览器加载时会阻塞其他资源，如果放到</body>标签之后，则不会阻塞资源。 因为如果放在</body>标签之前，则浏览器当解析到script标签时会暂停html的解析（因为不知道在js中会不会操作DOM，故此中断)。如果放在</body>标签之后，则浏览器当解析到script标签时不会出现阻塞，但是可能当用户操作DOM时，js没有响应(因为不存在阻塞现象，当页面展示出来时，js可能还没有加载完毕)。 在HTML
把 ＜script＞ 放在 ＜/body＞ 之前和之后有什么区别？浏览器会如何解析它们？
php_martin的博客
08-05 356
把``放在``之前和之后有什么区别？浏览器会如何解析它们？
script 标签位置的区别
最新发布
qq_45939519的博客
09-23 188
script 标签位置的区别
＜script＞放在head内和body内的区别
Q1368089323的博客
12-13 2346
1.区别简述： 在HTML body部分中的JavaScripts会在页面加载的时候被执行。 在HTML head部分中的JavaScripts会在被调用的时候才执行，但是在主页和其余部分代码之前预先装载。 加载的顺序不一样，你可以把ＨＴＭＬ看成从上往下加载的。 例如在网速慢的情况下把ｊｓ代码放在ｂｏｄｙ底部用户会先看到网页结构，等ｊｓ加载完成后才出现特效 2.JavaScript的位置 head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分
帮我写一个关于篮球的网页，要求只用html的标签和属性，使用如下的标签和属性(1)、基础标签 <meta> 属性charset，取值为utf-8； 属性http-equiv，取值为 expires/refresh； 属性name，取值为keywords、roborts。 属性content，注意content与不同属性搭配时的对应取值含义。 <title> <h1….h6> <p> <div> <section> <article> <aside> <footer> <address> <head> (2)、表单 <form> 属性action、method、target、enctype <input> 属性type，取值为radio、checkbox、file、password、text、submit、date、email、tel、range， 另外还有属性required、placeholder、pattern (3)、下拉选择列表和选项列表 <select> <optgroup> <datalist> <option> (4)、列表 <ul> <ol> <li> (5)、表格 <table> <tr> <th> <td> (6)、图像与映射 <img> 属性src、usemap <map> <area> 属性coords、href、shape、target (7)、链接 <a> <link> (8)、其他 <button> <canvas> <style> <script> <audio> <video>不使用css和Javascrip，
06-01
<head> <meta charset="UTF-8"> <meta name="keywords" content="篮球"> <meta name="robots" content="index,follow"> <title>篮球</title> </head> <body> <header> <h1>篮球</h1> </header> <nav> <ul> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值