<script> 元素

HTML 4.01 为 <script> 定义了以下6个属性:

  • async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作。只对外部脚本文件有效;
  • charset:可选。表示通过 src 属性指定的代码的字符集。很少有人用这个属性;
  • defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行;
  • language:已废弃;
  • src:可选。表示包含要执行代码的外部文件;
  • type:可选。表示编写代码使用的脚本语言的内容类型;目前 type 属性的值依旧还是 text/javascript。不过这个属性并不是必须的,因为没有指定时默认值也是 text/javascript

在使用 <script> 元素嵌入 JavaScript 代码时,不要在代码中的任何地方出现 "</script>"字符串。按照接卸嵌入式代码的规则,当浏览器遇到字符串 "</script>" 时,就会认为是结束的 </script>标签。而通过转义字符 “\” 可解决这个问题:"<\/script>"。例如:

<script>
    function sayScript(){
        alert("<\/script>");
    }
</script>

在引入外部文件时,只能像下面这样写:

<script type="application/javascript" src="example.js"></script>

而不能使用如下形式:

<script type="application/javascript" src="example.js"/>

引入了外部文件的 <script> 元素不能再嵌入代码,嵌入的代码将会被忽略,只外部文件起作用。

无论如何包含代码,只要不存在 deferasync 属性,浏览器都会按照 <script> 元素在页面中出现的先后顺序对它们依次进行解析。

标签的位置

现代 Web 应用程序一般都把全部的 JavaScript 引用放在 元素中页面内容的后面。如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>


<script src="example.js"></script>
</body>
</html>

延迟脚本

使用 defer 属性,相当于告诉浏览器立即下载,但延迟执行。IE4/Firefox3.5/Safari5/Chrome 是最早支持此属性的浏览器,其他浏览器会忽略此属性,因此把延迟脚本放在页面底部仍然是最佳选择。使用例子:

<script defer src="example.js"></script>

异步脚本

HTML 5 为 <script> 元素定义了 async 属性。这个属性与 defer 属性类似,都用来改变处理脚本的行为;但与 defer 属性不同的是,标记为 async 脚本并不保证按照指定它们的先后顺序执行。指定 async 属性的目的不是让页面等待两个脚本下载和执行,从而异步加载页面其他内容。因此,建议异步脚本不要在加载期间修改 DOM。异步脚本一定会在页面的 load 事件前执行。

<script async src="example.js"></script>

文档模式

IE 5.5 引入了文档模式的概念,而这个概念是通过使用文档类型(doctype)切换实现的。最初的两种文档模式是:混杂模式(quirks mode)和标准模式(standards mode)。这两种模式主要影响 CSS 内容的呈现,但在某些情况下也会影响 JavaScript 的解释执行。在此之后,IE 又提出一种所谓的准标准模式(almost standards mode)。

如果文档开始处没有发现文档类型声明,则所有的浏览器都会默认开启混杂模式;对于标准模式可以通过使用下面任何一种文档类型来开启:

<!-- HTML 4.0.1 严格型 html:4s -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- HTML 5 !-->
<!DOCTYPE html>

而对于准标准模式,则可以使用过渡型(transitional)或框架集型(frameset)文档类型来触发:

<!-- HTML 4.0.1 过渡型 html:4t -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML 4.0.1 框架集型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
    "http://www.w3.org/TR/html4/frameset.dtd">

<noscript> 元素

<body> 中使用此元素。