提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

JavaScriptHTML代码 比较 位置 哪个 应该 放在
2023-06-13 09:15:29 时间

在哪里放置JavaScript代码？

通常情况下，JavaScript代码是和HTML代码一起使用的，可以将JavaScript代码放置在HTML文档的任何地方。但放置的地方，会对JavaScript代码的正常执行会有一定影响，具体如下所述。

放置于<head></head>之间

将JavaScript代码放置于HTML文档的<head></head>标签之间是一个通常的做法。由于HTML文档是由浏览器从上到下依次载入的，将JavaScript代码放置于<head></head>标签之间，可以确保在需要使用脚本之前，它已经被载入了：

复制代码代码如下:

<html>
<head>
<scripttype="text/javascript">
……
JavaScript代码
……
</script>
</head>
....

放置于<body></body>之间

也有部分情况将JavaScript代码放置于<body></body>之间的。设想如下一种情况：我们有一段JavaScript代码需要操作HTML元素。但由于HTML文档是由浏览器从上到下依次载入的，为避免JavaScript代码操作HTML元素时，HTML元素还未载入而报错（对象不存在），因此需要将这段代码写到HTML元素后面，例子如下：

复制代码代码如下:

<html>
<head>
</head>
<body>
</body>
<divid="div1"></div>
<scripttype="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>
<scripttype="text/javascript">
<![CDATA[
JavaScript代码
]]>
</script>
</head>
....

以上两种将JavaScript代码写到HTML文档中的方式，都是HTML文档内部引用JavaScript代码的方式。除了内部引用，还可以使用外部引用方式。

外部引用JavaScript代码

将JavaScript代码（不包括<script></script>标签）单独形成一个文档，并以js后缀命名，如myscript.js，并在HTML文档<script></script>标签中使用src属性来引用该文件：

复制代码代码如下:
<html>
<head>
<scripttype="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文件时，需注意文件的正确路径。

相关文章