script元素属性及引入方法

Posted 2021-02-21 landuo629

script元素属性及引入方法

html4.01为script定义了下列6个属性：

1. async：可选。

• 表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。（只对外部脚本文件有效）
• async属性的目的是：不让页面等待两个脚本 下载和执行，从而异步加载页面其他内容。为此，建议异步脚本不要在加载期间修改DOM。异步脚本会在页面load事件前执行。
• async属性与defer属性类似，都用于改变处理脚本的行为，与defer类似都只适用于 外部脚本文件，并告诉浏览器立即下载文件，但与defer不同的是，标记为async的脚本并不保证按照指定的先后顺序执行，因此如果页面中有两个或多个带有async属性的引用文件，确保两者之间互不依赖非常重要。

2. charset：可选。

• 表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因为这个属性很少有人用。

3. defer：可选。

• 表示脚本可以延迟到文档全部被解析和显示之后再执行。（只对外部脚本文件有效，IE7及更早版本对嵌入脚本也支持这个属性）
• defer属性用途是：表明在执行时不会影响页面构造，也就是说，脚本会延迟到整个页面都解析完毕后再运行。因此在script中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。
• HTML5规范要求按照脚本出现的先后顺序执行，第一个延迟脚本会优先于第二个脚本执行，但现实中延迟脚本并不会按一定顺序执行，因此最好包含一个延迟脚本。

4. language：已废弃。

• 原来用于表示代码编写使用的语言（如js、js1.2.或VBScript），大多数浏览器会忽略这个属性，因此也没有必要用了。

5. src：可选。

• 表示包含要执行代码的外部文件。

6. type：可选。

• 可以看成是language的代替属性：表示编写代码使用的脚本语言的内容类型（也成为MIME类型）。

• 虽然text/javascript和text/ecmascript都已经不被推荐使用，但人们一直以来使用的都还是text/javascript。实际上，服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript，但type中设置这个值却可能会导致脚本文件被忽略。另外，在非IE浏览器中还可以使用一下值：application/javascript和application/ecmascript。

• 考虑到约定俗成和最大限度的浏览器兼容性，目前type属性的值依旧还是text/javascript。不过，这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript。

使用script元素的方式有两种：

1. 直接在页面中嵌入js代码。

• 包含在script元素内部的js代码将从上至下依次解释。解释器会解释一个函数的定义，然后将该定义保存在自己的环境中。
• 在解释器对script内部的所有代码求值完毕以前，页面中的其他内容都不会被浏览器加载和显示。

2. 引用外部js文件。

• 通过script的src属性引用外部文件，还可以包含来自外部域的文件，即src属性指向当前HTML页面所在域之外的某个域中的完整URL。样外部域中的代码也会被加载和解析，不过，加载外部域的文件要多加小心，如果遇到怀有恶意的程序员，那么他们随时都可能替换该文的代码。

注意：

1. 带有src属性的元素中，不应该包含额外的js代码，如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略 。
2. 无论如何包含代码，只要不存在defer和async属性，浏览器都会按照script元素在页面中出现的顺序对他们一次解析，即第一个script元素中的代码解析完成后，才解析第二个，第三个……