JavaScript代码应该放在HTML代码哪个位置比较好？
在哪里放置 JavaScript 代码？
通常情况下，JavaScript 代码是和 HTML 代码一起使用的，可以将 JavaScript 代码放置在 HTML 文档的任何地方。但放置的地方，会对 JavaScript 代码的正常执行会有一定影响，具体如下所述。
放置于<head></head>之间
将 JavaScript 代码放置于 HTML 文档的 <head></head> 标签之间是一个通常的做法。由于 HTML 文档是由浏览器从上到下依次载入的，将 JavaScript 代码放置于<head></head> 标签之间，可以确保在需要使用脚本之前，它已经被载入了：
<html>
<head>
<script type="text/javascript">
……
JavaScript 代码
……
</script>
</head>
....
放置于<body></body>之间
也有部分情况将 JavaScript 代码放置于 <body></body> 之间的。设想如下一种情况：我们有一段 JavaScript 代码需要操作 HTML 元素。但由于 HTML 文档是由浏览器从上到下依次载入的，为避免 JavaScript 代码操作 HTML 元素时，HTML 元素还未载入而报错（对象不存在），因此需要将这段代码写到 HTML 元素后面，例子如下：
<html>
<head>
</head>
<body>
</body>
<div id="div1"></div>
<script type="text/javascript">
document.getElementById("div1").innerHTML="测试文字";
</script>
</html>
但通常情况下，我们操作页面元素一般都是通过事件来驱动的，所以上面这种情况并不多见。另外我们不建议将 JavaScript 代码写到 <html></html> 之外。
提示
如果 HTML 文档声明为 XHTML ，<script></script> 标签必须在 CDATA 部分内声明，否则 XHTML 将把 <script></script> 标签解析为另一个 XML 标签，里面的 JavaScript 代码可能不会正常执行。因此，在严格的 XHTML 中使用 JavaScript 应该像如下示例一样声明：
<html>
<head>
<script type="text/javascript">
<![CDATA[
JavaScript 代码
]]>
</script>
</head>
....
以上两种将 JavaScript 代码写到 HTML 文档中的方式，都是 HTML 文档内部引用 JavaScript 代码的方式。除了内部引用，还可以使用外部引用方式。
外部引用 JavaScript 代码
将 JavaScript 代码（不包括<script></script>标签）单独形成一个文档，并以 js 后缀命名，如 myscript.js ，并在 HTML 文档 <script></script> 标签中使用 src 属性来引用该文件：
<html>
<head>
<script type="text/javascript" src="myscript.js"></script>
</head>
....
在使用了外部引用 JavaScript 代码之后，其好处显而易见：
1.避免在 JavaScript 代码里使用 <!-- ... //-->
2.避免使用难看的 CDATA
3.公共的 JavaScript 代码可以被复用于其他 HTML 文档，也利于 JavaScript 代码的统一维护
4.HTML 文档更小，利于搜索引擎收录
5.可以压缩、加密单个 JavaScript 文件
6.浏览器可以缓存 JavaScript 文件，减少宽带使用（当多个页面同时使用一个 JavaScript 文件的时候，通常只需下载一次）
7.避免使用复杂的 HTML 实体，如可以直接使用 document.write(2>1) 而无需写作 document.write(2<1)
将 JavaScript 代码形成为外部文件，也会增加服务器的 HTTP 请求负担，在超高并发请求的环境下，这并不是一个好的策略。另外 在引用外部 js 文件时，需注意文件的正确路径。
- js获取鼠标位置杂谈附多浏览器兼容代码
- JavaScript talbe表中指定位置插入一行的实现代码 脚本之家修正版
- 用Javascript 获取页面元素的位置的代码
- 用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
- 多浏览器兼容的获取元素和鼠标的位置的js代码
- Javascript在IE或Firefox下获取鼠标位置的代码
- javascript 获取页面的高度及滚动条的位置的代码
- 利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
- js与jquery中获取当前鼠标的x、y坐标位置的代码
- Javascript中找到子元素在父元素内相对位置的代码
- js获取鼠标点击的位置实现思路及代码
- js获取元素相对窗口位置的实现代码
- JavaScript程序开发之JS代码放置的位置
相关文章
这篇文章主要为大家介绍了简单实现js选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要给大家介绍了关于如何通过非数字与字符的方式实现PHP WebShell的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
注意一下：在chrome浏览器下，为了数据安全，隐藏的input：file不能trigger “click” 事件。 所以要设置input：file的透明度达到隐藏的效果2013-11-11
本文主要介绍了JavaScript编写九九乘法表的两种方法，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了微信小程序开发常用功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-02-02
对于js的一些常见事件的总结2008-12-12
下面小编就为大家带来一篇javascript之IE版本检测超简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
本文通过实例给大家介绍了PHP7新特性的相关知识，需要的朋友参考下吧2017-06-06
异常捕获相信对大家来说并不陌生,下面这篇文章主要给大家介绍了关于ES7中await如何优雅的捕获异常的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要为大家介绍了万物皆可柯里化的Ramda.js详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最新评论