js之script属性async与defer

概念

默认情况下js的脚本执行是同步和阻塞的,但是 <script> 标签有 defer 和 async 属性, 这可以改变脚本的执行方式,这些都是布尔类型了,没有值,只需要出现在 <script> 标签里即可。

如:

还要注意一点,html5说这些属性只在和src属性联合使用时才有效。

如果同时指定了两个属性,则会遵从async属性而忽略defer属性。

作用

defer 属性标注的脚本是延迟脚本,使得浏览器延迟脚本的执行,也就是说,脚本会被异步下载但是不会被执行,直到文档的载入和解析完成,并可以操作,脚本才会被执行。

async 属性标注的脚本是异步脚本,即异步下载脚本时,不会阻塞文档解析,但是一旦下载完成后,立即执行,阻塞文档解析。

区别

延迟脚本会按他们在文档里的出现顺序执行

异步脚本在它们载入后执行,但是不能保证执行顺序。

一张图足以说明区别:

使用async的意义就在于使得下载脚本时,不会阻塞文档的解析。因为async的脚本执行顺序是没有保证的,因此要确认脚本间没有依赖关系。

现在呢基本上都是在文档的最后写脚本,那么这和 defer 的区别在哪里呢?

第一点当然是异步下载脚本了,第二点就是 使用async或defer任何一个都意味着在脚本里不能出现 document.write。

参考

http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/

http://css-tricks.com/async-attribute-scripts-bottom/

<<JavaScript 权威指南>>

时间: 2024-08-30 15:41:10

js之script属性async与defer的相关文章

script标签async和defer的区别及作用

作用: 1.没有 defer 或 async,浏览器会立即加载并执行指定的脚本,也就是说不等待后续载入的文档元素,读到就加载并执行. 2.async 属性表示异步执行引入的 JavaScript,与 defer 的区别在于,如果已经加载好,就会开始执行——无论此刻是 HTML 解析阶段还是 DOMContentLoaded 触发之后.需要注意的是,这种方式加载的 JavaScript 依然会阻塞 load 事件.换句话说,async-script 可能在 DOMContentLoaded 触发之

HTML5 &lt;script&gt;元素async,defer异步加载

HTML5的async和deferred属性的出现对于页面的初次渲染来说是一个福音,解决了加载js文件时的阻塞问题,实现了script标签的async异步属性.过去我们使用各种JavaScript技巧来做这种事情,但现在新的属性让防止阻塞变得相对容易. async - HTML属性 如我前面提到的,添加async属性非常简单: <!-- 指定async,以及 onload 回调--> <script async src="siteScript.js" onload=&

script标签中的async和defer

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

script 异步加载 async 和 defer的区别

在HTML被解析的时候,如果遇到 <script> 标签,就会先暂停HTML解析,立即执行脚本(非外部js文件).<script src="./1.js"> 引入的外部js文件情况下会先下载再执行. 所以,如果在HTML解析期间被执行 js 脚本且计算量很大的情况下(循环十万次),那么页面就会造成卡顿和白屏现象. 这也是为什么 <script> 脚本建议写在 <body></body> 标签内的最后面,就是为了加快 HTML

HTML &lt;script&gt;元素async,defer异步加载

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

script标签里的defer属性

入职新公司,看代码的时候注意到有的script标签中有一个defer属性,查了一下.在这里分享出来. 需要注意的有三点,其中前两点是在错误中分辨出来的: 错误来源:http://www.w3school.com.cn/tags/att_script_defer.asp 1,defer属性只有IE支持:应该说是在主流浏览器都是支持的: http://www.runoob.com/tags/att-script-defer.html 中说了,在所有主流浏览器都支持defer属性:在Chrome,FF

JS之script标签

1.script标签的位置 script标签可以在head标签中,也可以在body标签中 2.async属性 async的目的是不让页面等待js文件的下载和执行,从而异步加载页面中的其他内容.只支持外部文件 3.defer属性 defer的目的是延迟执行js文件,直到浏览器遇到</html>才开始解析执行外部js文件.在IE 5,6,7中defer还能支持对嵌入脚本,IE 8以后只能支持外部js文件 4.<script src="1.js">alert('s')

js的offsetParent属性用法详解

js的offsetParent属性用法详解:此属性是javascript中较为常用的属性,对于它的良好掌握也是非常有必要的,下面就通过代码实例介绍一下它的用法,希望能够给需要的朋友带来一定的帮助.一.基本介绍:此属性可以返回距离指定元素最近的采用定位(position属性值为fixed.relative或者absolute)父级元素,如果父级元素中没有采用定位的元素,则返回body对象的引用.语法结构: obj.offsetParent 二.代码实例: <!DOCTYPE html> <

js 动态修改属性值 动态修改图片,字等

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv = "content-type" content="text/html;charset=utf-8"/> &