script元素
向HTML页面中插入JavaScript的主要方法,就是使用<script>
元素
<script>
有以下6个属性:
- async:可选 表示应该立即下载脚本 但不妨碍页面中的其他操作 只对外部脚本文件有效
- charset:可选 表示通过src属性指定的代码的字符集
- defer:可选 表示脚本可以延迟到文档完全被解析和显示之后再执行 只对外部脚本有效
- language:已废弃 用于表示编写代码使用的脚本语言
- src:可选 表示包含要执行代码的外部文件
- type:可选 表示编写代码使用的脚本语言的内容类型
使用<script>
元素的方式: - 直接在页面中嵌入JavaScript代码
!注意 !:当浏览器遇到字符串<\script>
时会认为是结束的</script>
标签,因此在代码中的某一地方出现这个字符串时,浏览器在加载代码时会产生错误,如果真的要用的,也必须通过转义字符“\”来解决,写成```</script> - 包含外部JavaScript文件
!注意 !:通过<script>
元素来包含外部js文件,那么src属性就是必须的,这个属性的值是一个指向外部js文件的链接
在html网页中外部文件的src属性只需包含在<script>和</script>
代码之间,就可以成功引用到这个外部js文件
在xhtml文档中,可以省略</script>
标签,但在html文档中不可以
带有src属性的<script>
元素不应该在其开始与结束标签之间再包含额外的js代码,如果包含了嵌入的代码,则只会下载并执行外部脚本文件,嵌入的代码会被忽略
src属性可以是指向当前html页面所在域之外的某个域中的完整url,这样位于外部域中的代码也会被加载和解析,就想着写代码位于加载它们的页面中一样
无论如何包含代码,只要不存在defer和async属性,浏览器都会按js文件出现的先后顺序依次进行解析
标签位置
按传统做法 所有<script>
元素都应该放在页面的<head>
元素中
这种做法的目的是把所有外部文件的引用都放在相同的地方
但缺点是必须等到全部js代码都被下载、解析和执行完成之后,才能开始呈现页面的内容,因此在有很多js代码的页面来说,有极大可能会导致浏览器在呈现页面时出现明显的延迟
因此,为了避免这个问题,现代Web应用程序一般都把全部js引用放在<body>
元素中页面内容的后面
这样做的优点是在解析包含的js代码之前,页面的内容将完全呈现在浏览器中,而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快
defer延迟脚本
在<script>
元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行
延迟执行的脚本在浏览器遇到</html>
时会执行
如果有多个延迟执行的脚本,HTML5规范要求脚本们按照出现的先后顺序依次执行,但现实中,并不一定会这样,因此最好只包含一个延迟脚本,且把延迟脚本放在页面底部是最佳选择
defer属性只适用于外部脚本文件
async异步脚本
只适用于外部脚本,并告诉浏览器立即下载文件
标记为async的脚本并不保证按照指定它们的先后顺序执行
指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容,因此建议异步脚本不要在加载期间修改DOM
异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行
noscript元素
使用<noscript>
元素可以指定在不支持脚本的浏览器中显示的代替内容,但在启用了脚本的情况下,浏览器将不会显示这个元素中的任何内容