前端基础知识:Script标签:向html插入js的方法
属性 | 值 | 描述 |
---|---|---|
async | async | 立即下载脚本(仅适用于外部脚本)。 |
charset | charset | 表示通过src属性指定的代码的字符集 |
defer | defer | 表示脚本可以延迟到文档完全被解析和显示之后再执行(仅适用于外部脚本)。 |
language | script(已废弃) | 表示编写代码使用的脚本语言。用 type 属性代替它。 |
src | URL | 规定外部脚本文件的 URL。 |
xml:space | preserve | 规定是否保留代码中的空白。 |
type | text/xxx | language的替换属性,表示编写代码使用的脚本语言的内容类型,也称为MIME属性。 |
所有<script>元素会按照在页面出现的先后顺序依次被解析,没有 defer
或 async
,浏览器会立即加载并执行指定的脚本, 只有解析完前面的script元素的内容后,才会解析后面的代码。
使用<script>的两种方式
- 页面中嵌入script代码, 只需指定type属性
<script type="text/javascript">
// 内部不能出现'</script>'字符串,如果必须出现,必须使用转义标签‘\’
function sayHi() {
console.log('hihihi');
alert('<\/script>');
}
</script>
包含在<script>元素内的代码会从上而下依次解释,在解释器对<script>元素内的所有代码求值完毕之前,页面中的其余内容都不会被浏览器加载或显示
- 包含外部js文件, src属性是必须的。
<script src="example.js"></script>
// 带有src属性的元素不应该在标签之间包含额外的js代码,即使包含,只会下载并执行外部文件,内部代码也会被忽略。
与嵌入式js代码一样, 在解析外部js文件时,页面的处理会暂时停止。
改变脚本行为的方法
1. defer: 立即下载,延迟执行
加载后续文档元素的过程将和 script.js
的加载并行进行(异步),但是 script.js
的执行要在所有元素解析完成之后。
会先与DOMContentLoaded事件执行。
延迟脚本总会按照指定他们的顺序执行。
<script defer="defer" src="example.js"></script>
2. async: 异步脚本
加载和渲染后续文档元素的过程将和 script.js
的加载与执行并行进行(异步)。
一定会在load事件之前执行,可能会在DOMContentLoaded事件之前或之后执行。
不能保证异步脚本按照他们在页面中出现的顺序执行。
<script async="async" src="example.js"></script>
区别:
- defer 和 async 在网络读取(下载)是一样的,都是异步的(相较于 HTML 解析)
- 它俩的差别在于脚本下载完之后何时执行,显然 defer 是最接近我们对于应用脚本加载和执行的要求的
- 关于 defer,它是按照加载顺序执行脚本的
- async 则是一个乱序执行的主,反正对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行
- async 对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行),不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的,最典型的例子:Google Analytics
THE END