script标签基础

script元素

如果想要在页面中添加javascript；唯一的方法就是使用<script>这个元素。 该元素具有以下六个属性：

• async:可选，表示应该立即下载脚本，但是不会影响页面中的其它操作，比如下载其它页面资源等。该属性只对外部脚本有效。
• charset:可选，表示通过src属性指定的代码的字符集，一般不使用。
• defer:可选，表示脚本延迟到文档完全被解析和显示之后再执行，只对外部脚本有用。
• language:已被废弃
• src:可选，要执行的外部脚本文件
• type:可选。 表示编写代码使用的脚本语言的内容类型(MIME)。

包含在<script>元素内部的js代码会被从上往下解析，当浏览器在解析该元素内部代码的时候，不会加载任何东西，直到该标签内部的代码被解析完。 以下代码会抛出一个错误：

  <script>
  function alertScript(){
    alert('</script>');
  }
  </script>
  

抛出错误的原因是浏览器解析到字符串’</script>‘会以为那是结束标签，解决办法是可以通过字符’\‘进行转义.

    <script>
    function alertScript(){
      alert('<\/script>');
    }
    </script>
    

延迟脚本加载和异步脚本

<script>元素的defer属性可以让外部脚本延迟加载；这个属性的用途是表明脚本在执行时不会影响页面的构造，即脚本会在整个DOM页面解析完毕之后再运行；如果设置了该 属性，浏览器就会立即下载该脚本但是会延迟执行。

  <script type="text/javascript" defer='defer' src='a.js'></script>
  

<script>元素的async属性与defer属性类似，与defer不同的是async并不保证按照指定它们的先后顺序执行。

    <script type="text/javascript" aync src='a.js'></script>
    <script type="text/javascript" aync src='b.js'></script>
  

以上代码中，b.js可能会在a.js之前执行。所以，应该要保证a.js和b.js之间互相不依赖。 异步脚本一定会在页面的load事件前执行。