js代码应该放在HTML的哪里

在哪里放置JavaScript代码？

我最近碰到个问题，load和onload的区别。当中在实验代码时发现js代码的放置顺序会影响js代码的执行。于是我就想知道js代码放在那最合适。

放置于<head>之间

这个是通常做法。由于HTML文档是由浏览器从上到下依次载入的。这样放置就保证了使用js脚本之前，它已经被载入了。

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

放置于<body>之间

我们假设Javascript代码需要操作HTML元素，而HTML是由浏览器从上到下依次载入的。如果放在<body>的前一部分，就会导致要操作的HTML元素还没载入，以至于报错。因此，我们需要把Javascript代码写在<body>的后一部分。

<html>
<head>
</head>
<body>
</body>
<div id="div1"></div>
<script type="text/javascript">
document.getElementById("div1").innerHTML="测试文字";
</script>
</html>

提示：如果 HTML 文档声明为 XHTML ， 标签必须在 CDATA 部分内声明，否则 XHTML 将把 标签解析为另一个 XML 标签，里面的 JavaScript 代码可能不会正常执行。因此，在严格的 XHTML 中使用 JavaScript 应该像如下示例一样声明：

<html>
<head>
<script type="text/javascript">
<![CDATA[
JavaScript 代码
]]>
</script>
</head>
....

外部引用JavaScript代码

将JavaScript代码单独形成一个 文档，并以js后缀命名。

<html>
<head>
<script type="text/javascript" src="myscript.js"></script>
</head>
....

使用优点：

  • 1.避免在 JavaScript 代码里使用

  • 2.避免使用难看的 CDATA

  • 3.公共的 JavaScript 代码可以被复用于其他 HTML 文档，也利于 JavaScript 代码的统一维护

  • 4.HTML 文档更小，利于搜索引擎收录

  • 5.可以压缩、加密单个 JavaScript 文件

  • 6.浏览器可以缓存 JavaScript 文件，减少宽带使用（当多个页面同时使用一个 JavaScript 文件的时候，通常只需下载一次

参考文章：https://www.jb51.net/article/56337.htm

Written on June 9, 2018