script元素属性及引入方法

angqiuli 2020-04-26

script元素属性及引入方法

HTML4.01为script定义了下列6个属性:

  1. async:可选。
  • 表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。(只对外部脚本文件有效)
  • async属性的目的是:不让页面等待两个脚本 下载和执行,从而异步加载页面其他内容。为此,建议异步脚本不要在加载期间修改DOM。异步脚本会在页面load事件前执行。
  • async属性与defer属性类似,都用于改变处理脚本的行为,与defer类似都只适用于 外部脚本文件,并告诉浏览器立即下载文件,但与defer不同的是,标记为async的脚本并不保证按照指定的先后顺序执行,因此如果页面中有两个或多个带有async属性的引用文件,确保两者之间互不依赖非常重要。
  1. charset:可选。
  • 表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值,因为这个属性很少有人用。
  1. defer:可选。
  • 表示脚本可以延迟到文档全部被解析和显示之后再执行。(只对外部脚本文件有效,IE7及更早版本对嵌入脚本也支持这个属性)
  • defer属性用途是:表明在执行时不会影响页面构造,也就是说,脚本会延迟到整个页面都解析完毕后再运行。因此在script中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。
  • HTML5规范要求按照脚本出现的先后顺序执行,第一个延迟脚本会优先于第二个脚本执行,但现实中延迟脚本并不会按一定顺序执行,因此最好包含一个延迟脚本。
  1. language:已废弃。
  • 原来用于表示代码编写使用的语言(如js、js1.2.或VBScript),大多数浏览器会忽略这个属性,因此也没有必要用了。
  1. src:可选。
  • 表示包含要执行代码的外部文件。
  1. 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内部的所有代码求值完毕以前,页面中的其他内容都不会被浏览器加载和显示。
  1. 引用外部js文件。
  • 通过script的src属性引用外部文件,还可以包含来自外部域的文件,即src属性指向当前HTML页面所在域之外的某个域中的完整URL。样外部域中的代码也会被加载和解析,不过,加载外部域的文件要多加小心,如果遇到怀有恶意的程序员,那么他们随时都可能替换该文的代码。

注意:

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

相关推荐

TesterJingel / 0评论 2020-03-23
yfisaboy / 0评论 2019-12-31
LczPtr / 0评论 2019-12-27