第二章 在HTML中使用JavaScript
<script>元素
- async:可选 表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本有效。
- charset:可选 通过src指定代码的字符集,大多数浏览器会忽略它的值,很少人用。
- defer:可选 表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
- language 已废弃
- src 可选 表示包含要执行的外部文件
- type: 可选表示编写代码使用的脚本语言的内容类型也叫MIME类型,默认为text/javascript
包含在<script>中的JavaScript代码将被从上至下依次执行解释,就拿前面这个例子来说,解释器会解释一个函数的定义,然后将该定义保存在自己的环境当中。在解释器对<script>元素内容的所有代码求值完毕以前,页面中的其余内容都不会被浏览器加载或显示。
带有src属性的<script>元素不应该在其<script>和</script>之间再包含额外的JavaScript代码,如果包含了嵌入的代码,则只会下载并执行外部脚本文件,嵌入的代码会被忽略。
只要不包含defer和async属性,浏览器都会按照<script>元素在页面中出现的先后顺序对他们依次进行解析。
defer="defer" 告诉浏览器立即下载该文件,但会延迟到浏览器遇到</html>标签后再执行。延迟脚本会按顺序执行
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
第二个脚本文件可能会在第一个脚本文件之前执行。因此,确保两者之间互不依赖非常重要,指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容,因此,建议异步脚本不要在加载期间修改DOM。
异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。
在XHTML中的用法
<script>
//<![CDATA[
//]]>
</script>
<noscript></noscript>当浏览器不支持脚本或脚本被禁用的时候显示
总结:
- 在包含外部JavaScript文件时,必须将src属性设置为指向相应文件的URL。而这个文件既可以是一个服务器上的文件,也可以是其他域中的文件。
- 所有<script>会按照他们在页面中出现的先后顺序依次被解析。在不使用defer和async属性的情况下,只有解析完前面的<script>元素中的代码后,才会开始解析后面<script>元素中的代码。
- 由于浏览器会先解析前面不使用defer的<script>代码,然后再解析后面的内容,所以,应该把<script>元素放在最后,即</body>的前面。
- 使用defer可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定他们的顺序执行。
- 使用async属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中的出现的顺序执行。