JavaScript代码应该放在HTML代码哪个位置比较好?
在哪里放置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文件时,需注意文件的正确路径。