2.1 script元素
历史: 由Netscape创造并在Netscape Navigator 2中首先实现。之后被加入HTML规范。
元素(HTML4.01): 6个,全部非必需
- async: 异步方式下载脚本
- charset: 使用src属性指定的字符集,大多数浏览器会忽略这个值,很少用
- defer: 立即下载,但 延迟到文档被完全解析和显示之后(遇到)执行。只对外部文件有效
- language: 使用的脚本语言,已废弃
- src:执行代码的外部文件
- type: 默认死type/javascript
使用方式:
- 直接嵌入:指定type属性,js代码中不能出现’‘
- 包含外部文件:src属性必需,可以跨域,不能混合嵌入代码,在xhtml中可以自闭合(不推荐)
2.1.1 标签的位置
惯例:
元素中(浏览器遇到标签时才会开始呈现内容,因而会有延迟)推荐:<body>
元素中页面的内容后面
2.1.2 延迟脚本
方式:
- HTML:
<script type="text/javascript"defer></script>
- XHTML:
<script type="text/javascript"defer="defer"></script>
规范行为(HTML5):
- 脚本会延迟到浏览器遇到标签后再按照出现的顺序执行,但都先于DOMContentLoaded事件触发前执行;
- 只适用于外部脚本文件;
现实行为:
- 延迟的脚本不一定会在DOMContentLoaded事件触发前执行,也不一定按照顺序执行,为了避免加载顺序的混乱,建议只有一个defer脚本;
- IE4-IE7支持对嵌入脚本的defer属性,IE8等支持HTML5实现的浏览器则会忽略这个属性。
2.1.3 异步脚本 (HTML5)
方式:
- HTML:
<script type="text/javascript" async></script>
- XHTML:
<script type="text/javascript" async="async"></script>
行为:
只是用外部文件;
- 立即异步下载,页面不会等待下载完毕和执行;
- 不保证顺序,因此确保异步脚本之间彼此不依赖;
- 页面load事件前执行,DOMContentLoaded事件之前或之后;
支持情况:
2.1.4 在XHTML中的用法(可以跳过这一节,因为HTML5标准正快速占领市场)
错误方式:<(小于号)在XHTML中被当作开始一个新标签来解析。
正确方式
方式一: 使用HTML实体替代尖括号(比如<替换<)
方式二: CData片段+JavaScript注释
2.1.5 不推荐使用的语法(早期)
2.2 嵌入代码与外部文件
外部文件优点:
- 可维护性
- 可缓存(复用)
- 适应未来: HTML和XHTML包含的外部文件的语法相同
2.3 文档模式(IE提出,其它效仿)
注意:主要影响css呈现,某些情况下也会影响js。
类型:
混杂模式: 不推荐,如果不适用hack技术,不同浏览器差异可能非常大
标准模式: 行为相对一致
准标准模式: 有两种触发方式,和标准模式非常接近,行为符合标准(处理图片间隙除外)
2.4 noscript 元素: 不支持JS的浏览器平稳退化的方式
用法: <body>
中的任何标签中都可以使用
行为: 下列情况下浏览器才会显示其中的内容
- 浏览器不支持脚本;
- 浏览器支持脚本但脚本被禁用;