关于JavaScript代码放在body中还是head的问题

最新推荐文章于 2023-07-19 16:48:38 发布

weixin_30481087

最新推荐文章于 2023-07-19 16:48:38 发布

阅读量422

点赞数 2

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/zd520/p/9343633.html

版权

　　从事前端也有段时间了，期间也看过不少别人写的代码，但是发现一个问题（不能说是一个问题吧）就是有些人把js代码放在head中，也有些人把js代码放在body中，回头想一想，哎，还真想不出为啥。在网上查了查其实这是个很初级的问题（还亏我工作了一段时间，惭愧！）好了，废话不多说，看问题。

　　其实浏览器在解析HTML是从上往下的。所以把js脚本放在head中的话，浏览器会先执行js脚本，然后在往下执行。就是你如果要为一个元素绑定事件的话，因为执行顺序的原因，还没有等body解析出来，就给你返回一个空值，就是你要绑定的东西没有。

　　如何要把js脚本放在bead中的话，一般会绑定监听事件，等页面完全解析出来再执行下面的代码。比如window.onload或者document.ready，加上这其中一段代码就行，表示DOM树全部加载完了在执行你要执行的代码，这样应该不会出现意外了。

　　如果你要放在body中的话，其实也没什么太大的问题，我认为会反而较好些，因为是js脚本放在了body中浏览器解析起来也就顺其自然的解析完全部代码。这也是我之前一直这样写的。

　　其实写在什么地方，看业务需求吧或者各个公司的代码规范。这篇文章初学者可以看看，大佬路过瞄一眼就行了。

转载于:https://www.cnblogs.com/zd520/p/9343633.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30481087

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

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中的`document.head`与`document.body`属性

最新发布

09-15

本文将详细探讨document.head与document.body的区别、它们的用途以及如何在实际开发中正确使用它们。 document.head和document.body是JavaScript中用于访问和操作HTML文档头部和主体的重要属性。它们在Web开发中的...

参与评论您还未登录，请先登录后发表或查看评论

在html中js代码写在head上和写在body上有的区别

weixin_51795940的博客

07-19

634

当JavaScript代码放在head部分时，它只会在被调用时才执行。这意味着需要调用才执行的脚本或事件触发执行的脚本应该放在head部分。当你把脚本放在head部分时，可以保证脚本在任何调用之前被加载。当JavaScript代码放在body部分时，它会在页面加载时被执行。这意味着当页面被加载时执行的脚本应该放在body部分。希望这些信息能够帮助您了解JavaScript代码放在head部分和body部分的区别。在HTML中，JavaScript代码可以放在head部分或body部分。

JavaScript脚本可以放在网页的head里或者body部分，而且效果也不相同。

weixin_34067102的博客

09-28

185

Body里的JavaScript 放在body部分的JavaScript脚本在网页读取到该语句的时候就会执行，例如： <html> <body> <script type="text/JavaScript">  </script> &

JavaScript学习笔记之JavaScript代码在HTML页面中的位置

Code_Thinking的专栏

10-12

880

javascript代码(当然是在)可以放在html文件的

关于“为什么有的js代码放在 head 和 body,一个有用,一个没用“问题

L2395183536的博客

12-16

374

关于"为什么有的js代码放在 head 和 body,一个有用,一个没用"问题今天在写完一个回到顶部的js代码，运行一看，发现失效，在一番努力后，发现了原因。我一看，是我大意了啊！原来是js引用出了错：有的js是立即执行，有的js是调用执行。立即执行在网页上打开时就可以看到效果，而调用执行的，一般会在其它元素触发事件的时候调用。对于立即执行的，我们最好放在head里，直接声明或者引用外部文件。对于调用执行的，我们在（事件触发处）body内外引用外部文件。 ...

为什么js代码放在head中报错，放在body中却能正常调用

qq_43654065的博客

05-25

437

javascript放在head和body的区别（w3c建议放在head标签中）

07-11

2475

JavaScript脚本放在哪里在HTML body部分中的JavaScripts会在页面加载的时候被执行。在HTML head部分中的JavaScripts会在被调用的时候才执行。——————————————————————————JavaScript应放在哪里页面中的Java

JavaScript放在body还是head中？

m0_57236802的博客

04-19

1160

中，浏览器在解析页面的同时可能需要执行 JavaScript。这可能导致页面渲染被阻塞，从而影响加载速度和用户体验。如果 JavaScript 代码是关键性的，即在页面加载时立即需要执行，那么可以将它放在。然而，根据不同的需求和最佳实践，通常推荐将 JavaScript 放在。总之，根据不同的需求和最佳实践，通常推荐将 JavaScript 放在。然而，在某些特殊情况下，你可能需要将脚本放在。尽管如此，在某些情况下，将 JavaScript 放在。中可能导致错误，因为所需的元素在脚本执行时尚未加载。

JS代码放在head和body中的区别

liu_ben_qian的专栏

04-02

1483

JS代码放在head和body中的区别 JavaScript经典 2010-08-10 14:38:57 阅读299 评论0 字号：大中小订阅放在head中的JS代码会在页面加载完成之前就读取，而放在body中的JS代码，会在整个页面加载完成之后读取。那

js代码放在head和body的区别

王欢的博客

04-05

1607

由于在页面中总是难免javascript脚本语言，在代码中看到body里可以放 <html> <body> <script type="text/javascript"> alert("in body"); </script> </body> <head> <script type="text/javascript"> alert("in head"); </script

有的js为什么放在body里面

hello world

02-26

1509

理论上来说js标签放在html文档的任何位置都可以，规范起见，推荐放到body结束标签的末尾，包含到body标签内： <body>  <script> // 这里是代码 </script> </body> 这样处理的好处是无需担心因页面未完成加载，造成DOM节点获取不到，使脚本报错的问题，而且能避免因脚本运行缓慢造成页面卡死的问题。另外，Yahoo的前端优化指南里就有这一条。放

js文件放head，还是body，哪些情况下引用到body

cry_watermelon的博客

12-01

1088

js文件放head，还是body，哪些情况下引用到body 原文链接：https://blog.csdn.net/Yy921117/article/details/51982159 放在head或body里面都可以，但是在一些情况下，一定要放在body的里面（在body结束前引用），跟浏览器加载机制有关涉及到的“浏览器渲染页面和加载页面机制"原文链接：https://www.cnblog...

javascript在html文件中的位置

chengjiamei的专栏

09-18

946

在哪里放置 JavaScript 代码？通常情况下，JavaScript 代码是和 HTML 代码一起使用的，可以将 JavaScript 代码放置在 HTML 文档的任何地方。但放置的地方，会对 JavaScript 代码的正常执行会有一定影响，具体如下所述。放置于之间将 JavaScript 代码放置于 HTML 文档的标签之间是一个通常的做法。由于 HTML 文档

JavaScript基础（.....持续待更）

ahct58280的博客

04-23

533

javascript热身一、你知道，为什么JavaScript非常值得我们学习吗？ 1. 所有主流浏览器都支持JavaScript。 2. 目前，全世界大部分网页都使用JavaScript。 3. 它可以让网页呈现各种动态效果。 4. 做为一个Web开发师，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。二、易学性 1.学习环...

JavaScript代码应该放在HTML代码哪个位置比较好？

10-25

这种布局方式的优点在于，当整个HTML文档从上至下加载时，放置在<head>中的JavaScript代码会在文档的body部分加载之前被浏览器解析和执行。这就意味着在HTML文档的body部分加载任何元素之前，相关的JavaScript操作和...

JS代码放在head和body中有区别吗？

AmberCR的专栏

03-02

508

很多人对js代码放在网页中的位置并没有太多的了解，一般认为是放在head中的，放在body里也没什么所谓吧。事实上还是有区别的。放在head中的JS代码会在页面加载完成之前就读取，而放在body中的JS代码，会在整个页面加载完成之后读取。

关于js写在head部分的问题

qq_41100045的博客

07-19

2612

当我们将js写在head部分时，我们要知道，html页面的加载顺序是从上到下的，如果我们写的js代码需要在文档加载完成后才能够去执行（一般都是要到文档加载完才执行的），那么我们放到<head>内可能导致无法获取对象的情况为了避免类似情况的发生，可以使用以下方式: （1）.将脚本代码放在网页的底端，运行脚本代码的时候，可以确保要操作的对象已经加载完成。（2）.通过window....

vue.js引用出错-script代码块放在head和body中的区别

weixin_30410999的博客

04-01

1338

这篇随笔是为了记录vue.js引用出错的原因，看到最后原来是vue.js代码放在head中不能正常使用，要最后发现要将其放在body中才行。。。原来是js代码放在head和body中的区别问题，占个坑，来埋点个人理解。现在个人将script块分为js执行代码和js函数两大块。例如： js执行代码在页面中可能长成这个鬼样： <script> var...