HTML4.01为该标签定义了下列六个属性:
- async : 可选。表示应该立即下载脚本,但不妨碍其他操作。比如下载其他资源或等待加载其他脚本。只对外部脚本有效
- charset:可选。表示通过src属性指定的代码字符集。一般浏览器会忽略,基本不使用。
- defer:可选。表示脚本可以延迟到文档完全被解析并显示后再执行。只对外部脚本有效。等同于将脚本放在body结尾处一个效果,基本可以废掉。当然,如果自己编程习惯是将所有脚本放在一起时,一些后期脚本则可以加上该属性!!!
- language:已废弃。用于标识脚本的语言。
- src:可选。表示包含要执行代码的外部文件的路径或者链接!
- type:可选。算是language的替代属性。例:type="text/javascript" 基本可以忽略,不写也可以。
基本可以说就这几个常用的。defer可以考略用一下;如果不太能确定的话,用defer
总是会比async
稳定。。。
注意事项:
- 在使用<script>标签嵌入js代码时,请不要再代码中出现('</script>')标签,浏览器会误认为代码结束。解决:'<\/script>' 转义符解决
- 注意,对于带有src的script标签中,切勿书写js代码,因为它只会下载外部的脚本代码,而将中间代码忽略,切记!!!
- 为了避免加载脚本js之前,页面结构已出现,一般建议将js文件放在body中内容标签后面。当然,放在前面也可以,给其标签上加defer属性名即可。
- 现实当中,延迟脚本(defer)并不一定会按照脚本执行,也不一定会DOMContentLoaded事件前执行,所以最好只包含一个外部的异步脚本。
- 对于async和defer,都是适用于外部脚本注入,但是defer并列则会按先后顺序来执行;async就不能保证他们之间可以按顺序来执行,建议用则推荐defer.
- 如果有两个以上的 异步脚本,采用async时确保两者之间无依赖关系,且在dom渲染之前未对页面进行操作
对于外部引入的脚本js的优点:
- 可维护性。把所有的js放在一个文件夹中,维护起来就轻松多了。且开发人员的可以在不触及页面结构文件的前提下,来专注修改编辑js代码。
- 可缓存性。浏览器可以根据具体的设置去缓存链接的外部脚本文件。通俗的说就是当有两个页面共用一个脚本文件时,该文件只需下载一次即可。即能够加快页面的加载速度。
- 适应未来趋势。比如xhtml和html的外部文件引入方式语法是相同的。
noscript标签:
- 浏览器不支持脚本
- 浏览器支持脚本,但脚本被禁用
符合上述两种条件,noscript中的内容才会出现。
解决的目的:当浏览器不支持js脚本语言时,让页面平缓的退化