Fei

script标签

2015-01-21

使用<script>标签的方式有两种：在页面中嵌入 JavaScript 代码和引入外部 JavaScript 文件。

在页面中嵌入 JavaScript 代码，其格式如下：

<script>console.log('biped.me');</script>

引入外部 JavaScript 文件，其格式如下：

<script src='example.js' />

二者不可混合，若出现下列情况，则只执行引入的外部 JavaScript 文件。

<script src='example.js'>// 下列代码会被忽略 console.log('biped.me');</script>

通常使用<script>标签时，type="text/javascript"这个属性较为常见。它的意思是指定 MIME 类型为text/javascript，但实际上服务器传输 JavaScript 文件时使用的 MIME 类型是application/x-javascript。由于type属性可选，故而使用<script>标签时可直接省略type="text/javascript"，这在真实开发过程中较为常用。

// 可以省略 type="text/javascript"
<script type='text/javascript'>console.log('biped.me');</script>

<script>标签的src属性既可以引入站内 JavaScript 文件，也可以引入站外 JavaScript 文件。这一点通常用来使用公共 CDN 加快网站访问速度，但选择站外 JavaScript 文件来源需慎重，因为文件内容不可控。

// 如使用CDN引入jQuery
<script src='http://cdn.staticfile.org/jquery/1.11.1/jquery.min.js' />

在 XHMTL 文档中可省略结束标签</script>，但不能在 HTML 文档中这么做。因为它不符合规范，且无法被 IE 正确解析。

// 在XHTML文档中符合规范，但在HTML文档中无法通过验证
<script src='example.js' />

<script>标签通常被放在文档中的<head>标签内，但这样做意味着页面内容的展示需要等到所有 JavaScript 全部下载、解析和执行完成以后，在此期间用户看到的是一片空白，体验糟糕。为此，通常将<script>标签放在<body>标签内、</body>标签前，以增强用户体验。

<!DOCTYPE html>
<html>
  <head>
    <title>biped.me</title>
  </head>

  <body>
    <!-- content here -->

    <script src="example1.js"></script>
    <script src="example2.js"></script>
    <script src="example3.js"></script>
  </body>
</html>