script的defer和async的区别。

我们常用的script标签,有两个和性能、js文件下载执行相关的属性:defer和async

defer的含义【摘自https://developer.mozilla.org/En/HTML/Element/Script

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed.



译文:这布尔属性设置为指示浏览器脚本是解析文档后执行。

async的含义【摘自https://developer.mozilla.org/En/HTML/Element/Script

Set this Boolean attribute to indicate that the browser should, if possible, execute the script asynchronously.



译文:这个布尔属性设置为显示浏览器应该,如果可能的话,异步执行该脚本。

先来试个一句话解释仨,当浏览器碰到 script 脚本的时候:

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

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

2.<script async src="script.js"></script>

async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。

3.<script defer src="myscript.js"></script>

defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

然后从实用角度来说呢,首先把所有脚本都丢到 </body> 之前是最佳实践,因为对于旧浏览器来说这是唯一的优化选择,此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

接着,我们来看一张图咯:

蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。

注意几点:

1、不要在defer型的脚本程序段中调用document.write命令,因为document.write将产生直接输出效果。

2、而且,不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

3、deferasync 在网络读取(下载)这块儿是一样的,都是异步的(相较于 HTML 解析)。

4、它俩的差别在于脚本下载完之后何时执行,显然 defer 是最接近我们对于应用脚本加载和执行的要求的。

5、关于 defer,此图未尽之处在于它是按照加载顺序执行脚本的,这一点要善加利用。

6、async 则是一个乱序执行的主,反正对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行。

7、仔细想想,async 对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行),不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的。

时间: 2024-08-05 06:29:05

script的defer和async的区别。的相关文章

js中sync、defer、async的区别

<script src="script.js"></script> 没有 defer 或 async,浏览器会默认为同步sync,会立即加载并执行指定的脚本,"立即"指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行. <script async src="script.js"></script> 有 async,加载和渲染后续文档元素的过程将和

defer和async的区别

先来试个一句话解释仨,当浏览器碰到 script 脚本的时候: <script src="script.js"></script> 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行. <script async src="script.js"></script> 有 async,加载和渲染

script的defer和async

我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Element/Script] This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed. async的含

&lt;script&gt; 的defer和async

<script src="../file.js" async="async"></script> file.js---- 仅仅只有alert("hello,world"); async 属性仅适用于外部脚本(只有在使用 src 属性时). 有多种执行外部脚本的方法: 如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行) 如果不使用 async 且 d

HTML5 defer和async的区别

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

defer 和 async的区别

defer 和 async 在网络读取(下载)这块儿是一样的,都是异步的(相较于 HTML 解析) 它俩的差别在于脚本下载完之后何时执行,显然 defer 是最接近我们对于应用脚本加载和执行的要求的 关于 defer,此图未尽之处在于它是按照加载顺序执行脚本的,这一点要善加利用 async 则是一个乱序执行的主,反正对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行 仔细想想,async 对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行

有关defer和async的区别

关于async.defer功能及异同的介绍 async属性会让js并行加载,并在js加载完成后立即执行,也就是说执行顺序由加载速度定,而不是html中的先后顺序 defer属性js同样会并行加载,而执行时间点为文档解析完成后,按照html中的顺序执行,也就是说defer不影响执行顺序 怪不得requirejs的依赖js间不能存在依赖关系.呵呵哒. http://www.tuicool.com/articles/bim2uyf?utm_medium=hao.caibaojian.com&utm_s

defer和async的详细区别

看过javascript高级程序设计的人,在javascript高级程序设计里,应该看到了介绍了有关defer和async的区别,可是比较浅显,而且也说得不是很清楚.下面我们来通过图片来详细了解下dfer和async的区别. 下面来看看这三句话: 1.<script src="script.js"></script> 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,"立即"指的是在渲染该 script 标签之下的文档元素之

script标签中的async和defer

在程序中代码是一行一行执行的,html标签都是由渲染引擎来执行,代码执行时从上往下一行一行执行,当执行到alert(如下图),alert会阻塞后面代码的执行,当点击完确定之后,代码继续往下执行. javascript的内容同样可在外部进行引用,如下图所示,正常情况下执行结果和上面的内容相同,但当我们给html的script标签中加入async或者defer属性时,代码的执行过程也将会随之改变. async 为异步,顾名思义就是多个人同时做多件事,这里区分sync,sync为同步,就是一个人有序的