来自 Web前端 2020-04-29 17:43 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

<script>属性async和defer的区别

时间: 2019-09-07阅读: 104标签: 区别

在HTML页面中插入Javascript的主要方法,就是使用<script>元素。这个元素由Netscape创造并在Netscape Navigator 2中首先实现。后来,这个元素就被加入到正式的HTML规范中。HTML4.01为<script>定义了6个属性,包括defer和async。defer和async都是可选的,且只对外部脚本文件有效。

async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或 等待加载其他脚本。只对外部脚本文件有效。

一、当浏览器解析到script脚本,没有defer或async时:

defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有 效。IE7 及更早版本对嵌入脚本也支持这个属性。

<script src="main.js"></script>

延迟脚本defer

浏览器会立即加载并执行指定的脚本,“立即”指在渲染该script标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

HTML 4.01 为script标签定义了 defer 属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。因此,在script元素中设置defer 属性,相当于告诉浏览器立即下载,但延迟执行。

二、当浏览器解析到script脚本,有async时:

!DOCTYPE htmlhtml head titleExample HTML Page/title script type="text/javascript" defer="defer" src="example1.js"/script script type="text/javascript" defer="defer" src="example2.js"/script /head body !-- 这里放内容 -- /body/html
<script async src="main.js"></script>

在这个例子中,虽然我们把script元素放在了文档的head元素中,但其中包含的脚本将延迟到浏览器遇到/html标签后再执行。HTML5 规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于 DOMContentLoaded 事件执行。在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在 DOMContentLoaded 事件触发前执行,因此最好只包含一个延迟脚本。

浏览器会立即下载脚本,但不妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。加载和渲染后续文档元素的过程和main.js的加载与执行并行进行(异步)。

前面提到过,defer 属性只适用于外部脚本文件。这一点在 HTML5 中已经明确规定,因此支持HTML5 的实现会忽略给嵌入脚本设置的 defer 属性。IE4~IE7 还支持对嵌入脚本的 defer 属性,但IE8 及之后版本则完全支持 HTML5 规定的行为。IE4、Firefox 3.5、Safari 5 和 Chrome 是最早支持 defer 属性的浏览器。其他浏览器会忽略这个属性,像平常一样处理脚本。为此,把延迟脚本放在页面底部仍然是最佳选择。

async不保证按照脚本出现的先后顺序执行,因此,确保两者之前互不依赖非常重要,指定async属性的目的是不让页面等待两个脚本的下载和执行,从而异步加载页面其他内容,建议异步脚本不要在加载期间修改DOM。

异步脚本async

网上澳门金莎娱乐,异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。支持异步脚本的浏览器有Firefox 3.6、Safari 5 和Chrome。

HTML5 为script元素定义了 async 属性。这个属性与 defer 属性类似,都用于改变处理脚本的行为。同样与 defer 类似,async 只适用于外部脚本文件,并告诉浏览器立即下载文件。但与 defer 不同的是,标记为 async 的脚本并不保证按照指定它们的先后顺序执行。例如:

三、当浏览器解析到script脚本,有defer时:

!DOCTYPE htmlhtml head titleExample HTML Page/title script type="text/javascript" async src="example1.js"/script script type="text/javascript" async src="example2.js"/script /head body !-- 这里放内容 -- /body/html
<script defer="defer" src="main1.js"></script>
<script defer="defer"  src="main2.js"></script>

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:&lt;script&gt;属性async和defer的区别

关键词: