1.1 元素属性
1. async
- 可选
- 表示应该立即下载脚本,但不妨碍页面中的其他操作。如下载其他资源或等待加载其他脚本
- 只对外部脚本有效
- async属性规定一旦脚本可用,则会异步执行
语法:
<script async="async">
2. charset
- 可选
- 与 src 属性一起使用,告诉浏览器用来编码这个 javascript 程序的字符集。它的值是任何一个 ISO 标准字符集编码的名称
- 大多数浏览器会忽略它的值,使用少
语法:
<script charset="value">
3. defer
- 可选
- 表示脚本可以延迟到文档完全被解析和显示之后再执行,JavaScript 加载时 HTML 并未停止解析,这两个过程是并行的
- 只对外部脚本文件有效
语法:
<script defer="defer">
4. language
- 已废弃
- 用于表示编写代码使用的脚本语言,但大多数浏览器会忽略这个属性
5. src
- 可选
- 规定外部脚本文件的 URL
语法:
<script src="value">
URL可以指向其他站点,也可以指向站点内文件
6. type
- 可选
- type 属性标识 标签之间的内容
- 如果没有指定这个属性,则其默认值为 text/javascript
语法:
<script type="value">
常用属性值:
- text/javascript
- text/ecmascript
- application/ecmascript
- application/javascript
- text/vbscript
1.2 执行顺序
js是脚本语言,边解释边执行,顺序执行,所以建议将js放在</body>
之前DOM之后。
注意:
- 按照解析嵌入式代码的规则,当浏览器遇到
</script>
时会认为其是结束标签。
可以通过转义字符"\"来解决这个问题。
如:<\/script>
- 带有src属性时,不应该在其
<script>
和</script>
标签之间再包含额外的JavaScript代码。- 只要不存在defer和async属性,浏览器都会按
<script>
元素在页面出现的顺序对它们依次进行解析。
1.3 标签位置
现代Web应用程序一般把全部JavaScript引用放在<body>
元素中页面内容的后面。
作用:
- 在解析包含的JavaScript代码之前,页面内容将完全呈现在浏览器中
- 用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了
1.4 延迟脚本
原因:
浏览器在解析文档加载js时, 会中断DOM的解析。
解决方法:
添加defer属性后,允许脚本下载,但不允许执行,避免中断了DOM的执行。
现实中, 延迟脚本并不一定会按顺序执行,也不一定会在DOM事件触发前执行,因此最好只包含一个延迟脚本。
1.5 异步脚本
script元素设置async属性,告知浏览器创建一个线程下载JavaScript文件。下载完后立即执行,不会阻塞浏览器继续解析文档。
指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。为此,建议异步脚本不要在加载期间修改DOM。