script中的async和defer

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

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

defer

对于defer，我们可以先思考一个情况。一个页面如果有N个外链的脚本，放在head中，那么，当加载脚本时会阻塞页面的渲染，也就是常说的空白。

如果在 <head> 中, 通过 <script>标签引用js文件，那么在这些js加载并执行完之前，浏览器不会继续往下解析html，用户就会看到所谓的白屏； <script defer src="my.js">..</script>，带 defer属性的 script ，即使放在 head 里面, 它也会等到html解析完成(DOMDocumentLoaded)之后再执行，类似把 script 放在了页面底部。

async

<script async src="my.js"></script>, async属性类似defer， 也会让脚本异步加载，不会阻塞html的往下解析；但是async加载的js，会在加载完时立即执行，所以脚本之间的执行顺序无法保证, 适用于无依赖（不依赖也不被依赖)的脚本。

//没有 defer 或 async，

//浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，要先完成JS的加载并执行。

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

//有 async，加载和渲染后续文档元素和 script.js 的加载与执行并行（异步）。

//同时script.js会在加载完后，立即执行

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

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

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

从实用角度来说呢，把所有脚本都丢到 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析; 但有些时候我们有确实需要async 和defer属性，实现异步加载脚本，避免后续DOM的渲染被阻塞。

具体区别，这张图说明的很清楚:

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

  • defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）

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

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

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

  • 仔细想想，async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics

转:script中的async和defer的更多相关文章

  1. <script>中的async与defer属性

    1.script元素中的defer属性 1.1说明 使用该属性可以使脚本延迟到文档完全被解析和显示之后再按照原本的顺序执行,即告诉浏览器立即下载脚本,但延迟执行,该属性只对外部脚本有效 1.2使用方法 ...

  2. 浅谈script标签中的async和defer

    script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了.直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲染 ...

  3. script标签中的async、defer属性

    Script标签是我们常用的引用js脚本的一种方式. 撸代码的时候,我们常常只写src属性,直接忽略其他属性. 最近发现了2个可以利用的属性:async.defer. 顾名思义async就是异步,在不 ...

  4. script标签的async和defer

    兼容性 IE对于defer一直都支持,async属性IE6-9都没有支持,IE10及以上支持 相同点与不同点 带有async或defer的script都会立刻下载并不阻塞页面解析,而且都提供一个可选的 ...

  5. html中script标签使用async属性和defer属性的区别

    相同点: 首先async和defer只对header里的外连脚本script标签上起作用,如果script标签是放在header外或者是header里的内置脚本以及动态生成的script标签是不起作用 ...

  6. script标签不带属性与带async、defer的区别

    <script> 当页面解析到script标签时,会停止解析并下载对应的脚本,并马上执行,执行完毕后再继续解析页面 <script async> async 在下载脚本的同时不 ...

  7. JavaScript异步加载的三种方式——async和defer、动态创建script

    一.script标签的位置 传统的做法是:所有script元素都放在head元素中,必须等到全部js代码都被下载.解析.执行完毕后,才能开始呈现网页的内容(浏览器在遇到<body>标签时才 ...

  8. js之script属性async与defer

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

  9. script async和defer

    1.没有async和defer,html解析时遇到script标签,会先去下载js文件,文件加载完成立即执行,执行完了再开始解析后面的html,是一个顺序流的过程 2.async,加载和渲染后续文档元 ...

随机推荐

  1. [Poco库]使用经验

    1. Link错误 在Windows平台下使用时link报错 "CreateProcess is not defined"的解决GetEnvironmentVariable / S ...

  2. CSS自学笔记（11）:CSS3背景和边框

    CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...

  3. 0-20ma 0-5V,0-10V ,0-15V ,0-20V,0-30V模拟量(范围可以定制)多功能采集模块，支持1路继电器输出，2路Di输入，8路Ai输入，可电脑控制，支持485 modbus rtu协议。端口参数可以配置保存，支持定制修改。

    多功能模拟量采集模块MRD-5017具有8 通道模拟量采集(支持0-20mA,0-5V,0-10V混合测量),2路DI,1路继电器输出,1路485接口(支持MODBUS RTU),能实现8路AI(12 ...

  4. 几种常用单片机I/O口线的驱动能力

    摘要: 详细分析了几种常见单片机的I/O口结构,并据此分析其驱动能力大小 在控制系统中,经常用单片机的I/O口驱动其他电路.几种常用单片机I/O口驱动能力在相关的资料中的说法是:GMS97C2051. ...

  5. .Net中String和StringBuilder的区别

    String对象是不可变的而StringBuilder则不是这样,可以方便的Append进行扩展. 比如:string aa="123456",那么aa就会在内存中占用一块能放下这 ...

  6. 短路与&&和按位与&的区别

    条件1&&条件2,短路与&&如果条件1为假则不判断条件2:而按位与&如果条件1为假仍旧判断条件2

  7. ACM学习-POJ-1004-Financial Management

    菜鸟学习ACM,纪录自己成长过程中的点滴. 学习的路上,与君共勉. ACM学习-POJ-1003-Financial Management Financial Management Time Limi ...

  8. Struts2 四、Struts2 处理流程

    1. 一个请求在Struts2框架中的处理步骤: a) 客户端初始化一个指向Servlet容器的请求: b) 根据Web.xml配置,请求首先经过ActionContextCleanUp过滤器,其为可 ...

  9. js计算时间差,包括计算，天，时，分，秒

    收集两个计算时间差的计算方法代码片段: var date1=new Date(); //开始时间 var date2=new Date(); //结束时间 var date3=date2.getTim ...

  10. float

    .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: b ...