HTML4.01为<script>定义了6个属性:
- async:可选,异步,立即下载脚本,但不妨碍页面中的其他操作,比如下载资源或等待加载其他脚本,只对外部脚本有效,多个带有async的脚本并不能保证按照执行顺序执行,异步脚本会在页面的load之前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。
- charset:可选,用过src指定代码的字符集。很少人用,大多数浏览器会忽略它的值。
- defer:可选,立即下载,脚本延迟到文档被完全解析和显示之后再执行,只对外部脚本有效,如果有多个脚本,不能保证按顺序执行,也不一定会在DOMContent事件触发之前执行,因此建议只包含一个延迟脚本。
- language:已废弃,表示编写代码使用的脚本语言。
- src:外部文件路径。
- type:可选,language的替代属性,一般都是text/script。
浏览器工作顺序:
- 解析html结构
- 挤在外部脚本和css文件
- 解析并执行代码
- DOM树构建完成(DOMContentLoaded事件触发)
- 加载外部图片等文件
- 页面加载完成,此时触发load事件
- 我们在 jQuery 中经常使用的 $(document).ready(function() { // ...代码... }); 其实监听的就是 DOMContentLoaded 事件,而 $(document).load(function() { // ...代码... }); 监听的是 load 事件。
使用script的方式有两种,嵌入式和外链式:
- 在head部分嵌入<script>
- 在body部分嵌入
- 上述两个标签内可以使用外链
定义script内部的代码将被从上至下依次解释,解释器会解释一个函数的定义,然后将定义保存在该环境中,再解释器对<script>内部的所有代码求值完毕以前,
页面中的其余内容都不会被浏览器加载或显示。并且在嵌入javascript代码时,不要在任何地方出现“</script>”字符串,浏览器会认为是结束的标签,可以通过转义符“/”解决这个问题。
在解析外部和嵌入式代码,浏览器的处理方式是一样的,页面的处理会暂时停止,如果是非常大型的外部脚本,建议放在<body>内容后,</body>结束之前,因为浏览器从上至下解析可以避免造成短暂的页面空白。
外部script的标签中不应该再嵌入代码,否则浏览器会直接加载外部脚本,忽略标签内的代码。