JavaScript之延迟脚本和异步脚本

3 篇文章 0 订阅

延迟脚本

如果想放在<head>里面,也是可以的,使用html4.01定义的defer属性,用法如下:这样设置相当于是告诉浏览器立即下载,但是延迟执行。

<head>
	<script src="js/index" defer="defer"></script>
</head>

有了defer属性,包含的脚本将会在遇到</html>才会执行。

HTML5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于DOMContentLoaded事件先执行。在现实中,延迟脚本不一定会按照顺序执行,也不一定在DOMContentLoaded事件触发前执行,因此最好包含一个脚本。
defer属性只适用于外部脚本文件。但是在HTML5中,支持HTML5的实现会忽略给脚本设置的defer属性。

兼容性:
IE4~IE8支持对嵌入脚本的defer属性,但IE8及之后版本则完全支持HTML5规定的行为。
IE4、Firefox3.5、Safari 5和Chrome最早支持defer属性。其他浏览器会忽略。

在XHTML文档中,要把defer属性写成:defer="defer"

异步脚本

HTML5提供的async属性,与defer类似。都用于处理脚本。只适用于外部文件,并告诉浏览器立即下载文件。标记async的脚本并不保证会按照它们指定的顺序执行。
如果引入两个脚本,最好它们之间互不依赖。
为什么要使用async?

不让页面等待两个脚本下载和执行,从而异步加载页面的其他内容。所以建议:
异步脚本不要在加载期间修改DOM。
异步脚本一定会在load事件前执行,但可能会在DOMContentLoaded事件触发之前或者之后执行。

兼容性:
支持异步脚本的浏览器有:Firefox3.6、Safari 5和Chrome。

在XHTML中,要把async属性设置为:async="async"

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值