、async 和 defer 属性

http://blog.csdn.net/qq_34986769/article/details/52155871

1. defer 属性

<script src="file.js" defer></script>

defer属性声明这个脚本中将不会有 document.write 或 dom 修改。
浏览器将会并行下载 file.js 和其它有 defer 属性的script,而不会阻塞页面后续处理。
defer属性在IE 4.0中就实现了,超过13年了!Firefox 从 3.5 开始支持defer属性 。
注:所有的defer 脚本保证是按顺序依次执行的。
2. async 属性

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

async属性是HTML5新增的。作用和defer类似,但是它将在下载后尽快执行,不能保证脚本会按顺序执行。它们将在onload 事件之前完成。
Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer,这样IE 4之后的所有 IE 都支持异步加载。
3. 详细解释
<script> 标签在 HTML 4.01 与 HTML5 的区别:

type 属性在HTML 4中是必须的,在HTML5中是可选的。
    async 属性是HTML5中新增的。
    个别属性(xml:space)在HTML5中不支持。

说明:

async:false,script 将立即获取(下载)并执行,然后才继续后面的处理,这期间阻塞了浏览器的后续处理。
    async:true,那么 script 将被异步下载并执行,同时浏览器继续后续的处理。
    HTML4中就有了defer属性,它提示浏览器这个 script 不会产生任何文档元素(没有document.write),因此浏览器会继续后续处理和渲染。

如果没有 async 属性 但是有 defer 属性,那么script 将在页面parse之后执行。(async=false;defer=true)

如果同时设置了二者,那么 defer 属性主要是为了让不支持 async 属性的老浏览器按照原来的 defer 方式处理,而不是同步方式。(异步兼容,同时使用defer+async)

--------------------------------------------------------------------------------------------------------------------------------http://blog.csdn.net/q121516340/article/details/51436314

优化脚本文件的加载提高页面的加载速度,一直是前端工程师提高页面加载速度很重要的一条。因为涉及到各个浏览器对解析脚本文件的不同机制,以及加载脚本会阻塞其他资源和文件的加载。当浏览器解析器遇到<script>时,会立即加载(加载:下载,解析和执行),浏览器对其他资源和文档的加载会停止。为了提高页面的加载速度,得让JS不阻塞其他资源的加载。

Webkit 和 Firefox 对JS的执行过程进行了优化,增加了“预解析”这个过程,“预解析”过程不会修改DOM树,所以可以跟其他解析过程并行,该过程由预解析器去完成,而可能会改变DOM树执行过程则由主解析器来完成,在通过解析过程了解JavaScript文章中有提到的JS的“预解析”过程,此过程应该就是由浏览器的预解析器完成,预解析器还负责解析样式表和图片。

另一方面,浏览器同事请求http的数量也是有一定限制的,加载js不像加载样式那样是并行的。样式表是构建呈现树的一部分,浏览器在解析页面结构是由DOM树和呈现树两部分组成,而解析执行样式表只会改变样式表不会更改DOM树,呈现树跟DOM树虽然是相对应的,但并非一一对应。因此,也就没有必要停止对其他资源和文档的加载了。

提高页面加载速度的最简单快速的方法就是将脚本文件放到body底部。但这并不是提高页面加载速度最优方案的方案,接下来我们介绍其他方案。

首先来介绍一下<script>时能让脚本延迟和异步执行的两个属性:defer和async。

Defer、Async属性

  • defer是html4.0中定义的,该属性使得浏览器能延迟脚本的执行,等文档完成解析完成后会按照他们在文档出现顺序再去下载解析。也就是说defer属性的<script>就类似于将<script>放在body的效果。
  • async是HTML5新增的属性,IE10和浏览器都是支持该属性的。该属性的作用是让脚本能异步加载,也就是说当浏览器遇到async属性的<script>时浏览器加载css一样是异步加载的。

支持async属性的浏览器貌似没什么问题,但是defer属性在各个浏览器中支持程度有点不同。测试代码如下

<script type="text/javascript" defer>
alert('defer')
</script>
<script type="text/javascript">
alert('script')
</script>
<script type="text/javascript">
window.onload = function(){
alert('onload')
}
</script>

defer测试代码,可将代码复制到本地自己测试,外部脚本src引入,内联脚本直接粘帖

运行以上代码,得出以下结论:

  • 外部JS在各个浏览器里运行结果跟定义的执行顺序正常,alert信息会按照 script->defer->onload顺序弹出;
  • 内联脚本,如果脚本都是IE9/8/7/6按照定义的顺序弹出信息,其他浏览器则按照 defer->script->onload 顺序弹出信息,表示defer失效。
  • 而如果有多个内联defer脚本、在body和head都有分布或者在iframe中也有内联defer脚本,则在IE6中表现一致。

如果想给脚本增加defer属性让其延迟加载的话,最好是外部脚本,内联的defer不仅多数浏览器不支持,而且IE6的表现也不一致。

所以将脚本放在body底部比给脚本增加defer属性让脚本延迟加载更好,就像yslow建议的那样:put style top,put script bottom。

浏览器的在遇到defer和async属性的<script>的浏览器执行过程如下(以下摘自javascript权威指南):

  1. WEB浏览器创建Document对象,并且开始解析WEB页面,解析HTML元素和它们的文本内容后添加Element对象和Text节点到文档中。这个过程的readystate的属性值是“loading”
  2. 当HTML解析器遇到没有async和defer属性的<script>时,它把这些元素添加到文档中,然后执行行内或外部脚本。这些脚本会同步执行,并且在脚本下载(如果需要)和执行解析器会暂停。这样脚本就可以用document.write()来把文本插入到输入流中。解析器恢复时这些文本会成为文档的一部分。同步脚本经常单定义函数和注册后面使用的注册事件处理程序,但它们可以遍历和操作文档树,因为在它们执行时已经存在了。这样同步脚本可以看到他自己的<script>元素和它们之前的文档内容
  3. 当解析器遇到了设置async属性的<script>元素时,它开始下载脚本,并继续解析文档。脚本会在它下载完成后尽快执行,但是解析器没有停下来等他下载。异步脚本禁止document.write()方法。它们可以看到自己的<script>元素和它之前的所有文档元素,并且可能或干脆不可能访问其他的文档内容。
  4. 当文档完成解析,document.readyState属性变成“interactive”。
  5. 所有有defer属性的脚本,会被它们在文档的里的出现顺序执行。异步脚本可能也会在这个时间执行。延迟脚本能访问完整的文档树,禁止使用document.write()方法。
  6. 浏览器在Document对象上触发DOMContentLoaded事件。这标志着程序执行从同步脚本执行阶段转到异步事件驱动阶段。但要注意,这时可能还有异步脚本没有执行完成。
  7. 这时,文档已经完全解析完成,但是浏览器可能还在等待其他内容载入,如图片。当所有这些内容完成载入时,并且所有异步脚本完成载入和执行,document.readyState属性变为“complete”,WEB浏览器出发Window对象上的load事件。
  8. 从此刻起,会调用异步事件,以异步响应用户输入事件,网络事件,计算器过期等。

script 有哪个属性可以让它不立即执行 defer,async的更多相关文章

  1. 如何将 JavaScript 代码添加到网页中,以及 <script> 标签的属性

    Hello, world! 本教程的这一部分内容是关于 JavaScript 语言本身的. 但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择.我们会尽可能少地 ...

  2. script标签crossorigin属性及同源策略和跨域方法

    首先介绍(同源策略) 同源策略是浏览器最核心且基本的安全约定,要求协议.域名.端口都相同为同源,如果非同源时请求数据浏览器会在控制台抛出跨域异常错误,同源策略是浏览器的行为,即使客户端请求发送了,服务 ...

  3. 使用 script 的 module 属性实现 es6 以上的兼容

    几个月前看到了这篇文章 https://philipwalton.com/articles/deploying-es2015-code-in-production-today/,给了我很大的启发,本来 ...

  4. script标签加载顺序(defer & async)

    script 拥有的属性 async:可选,表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. charset:可选.表示通过 src 属性指 ...

  5. script 标签的defer,async的作用,及拓展浏览器多线程,DOMContentLoaded

    前端优化有一点就是优化js的执行时机,一般做法是将script放置于body的结束标签,以避免加载执行js 文件导致页面渲染阻塞的问题这种做法确实能防止页面阻塞,但是在页面渲染完成之后才去加载js文件 ...

  6. [转]script之defer&async

    html5中script的async属性 我兴奋于html5的原因之一是一些久久未能实现的特性现在可以真正运用于实际项目中了. 如我们使用placeholder效果蛮久了但是那需要javascript ...

  7. java静态代码块/静态属性、构造块、构造方法执行、main方法、普通代码块的顺序

    java静态代码块/静态属性.构造块.构造方法执行.main方法.普通代码块的顺序 这也是在笔试中的一个重要的考点,就有一个输出语句让你写出输出的结果. 理论知识: 静态代码块是:属于类的,在类加载时 ...

  8. 找到你的位置(JS在页面中的位置)最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分

    找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分 最常用的方式是在页 ...

  9. 让script的type属性等于text/html

    type属性为text/html的时候,<script>片断中定义一个被JS调用的代码,代码不会在页面上显示 <script id="commentTemplate&quo ...

随机推荐

  1. 构建LVS-DR+Keepalive高可用集群

    ------client----------主LVS----------从LVS------------WEB1-------------WEB2--------- 2.2.2.250  2.2.2. ...

  2. RAID 详解

    一.什么是RAID 磁盘阵列全名是『Redundant Arrays of Inexpensive Disks, RAID 』,英翻中的意思是:容错式廉价磁盘阵列. RAID 可以透过一个技术(软件或 ...

  3. 独立成分分析(ICA)的模拟实验(R语言)

    本笔记是ESL14.7节图14.42的模拟过程.第一部分将以ProDenICA法为例试图介绍ICA的整个计算过程:第二部分将比较ProDenICA.FastICA以及KernelICA这种方法,试图重 ...

  4. FtpUtil.java测试 (淘淘商城第三课文件上传)

    首先在common-taotao中创建一个utils包,复制FtpUtil.java到其中.然后如下: @Test public void testFtpUtil() throws Exception ...

  5. oracle创建触发器及作用举例

    --创建触发器及作用举例 create or replace trigger tri before delete on emp --在删除emp表数据之前需要做的事根据自己的业务去写,before是在 ...

  6. nginx https配置后无法访问,可能防火墙在捣鬼

    同事发现nginx配置后https 无法访问,我帮忙解决的时候从以下出发点 1.防火墙未开放443端口 2.配置出错 1 2 3 于是就 netstat -anp 查看防火墙开的端口 发现已经在监听了 ...

  7. TP框架自带的正则验证的规则

    thinkphp框架里面自带有很多自动验证的规则,下面是框架自带的正则验证的规则,官方的说明文档里面没有这么多,所以记下来,以备使用. view sourceprint? 01 static $reg ...

  8. 带您了解mysql CONCAT()函数

    CONCAT()函数是mysql中非常重要的函数,可以将多个字符串连接成一个字符串,下文对该函数作了详细的阐述,希望对您有所帮助. mysql CONCAT()函数用于将多个字符串连接成一个字符串,是 ...

  9. Android-第三天

    今天开始做一个提交的页面,本来是用LinearLayout,但是这种布局要使用到多组LinearLayout,于是采用表格布局+相对布局的方式. <TableLayout> <Tab ...

  10. 浅谈linux虚拟内存结构

    一个虚拟存储器系统要求硬件和软件之间紧密写作(mmu(内存管理单元,虚拟地址到物理地址的翻译),TLB块表(虚拟地址到物理地址index,虚拟寻址),l1,l2,l3高速缓存(物理单元数据)物理寻址) ...