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. php将unicode编码转为utf-8方法

    介绍 在前端开发中,为了让中文在不同的环境下都能很好的显示,一般是将中文转化为unicode格式,即\u4f60,比如:"你好啊"的 unicode编码为"\u4f60\ ...

  2. action接收到来自jsp页面的请求时出现中文乱码问题处理方法

    写JSP程序时,在Servlet中取请求参数时出现了乱码,当然,这种乱码问题再简单不过了.由于在JSP中使用了GBK作用页面的编码,那么提交的中文信息自然也会被按着GBK进行编码,为%xx格式的GBK ...

  3. Eclipse使用git 上传代码至github

    右击项目,选择Team->Share Project,弹出如下窗口. 选择git,next,在弹出的界面上,①先勾选Use or create……,②createrepository,③勾选工程 ...

  4. js数组(一)

    一.创建数组两种方法: 1Array构造 var colors = new Array();2.字面量表示什么事字面量,如 var colors = ["red","gr ...

  5. Get a handle on PHP Handlers

    PHP Handlers? mod_php? FPM? How do we make sense of the inner workings of PHP outside of our lines o ...

  6. Service(Local Service)简介

    一.Service的作用 主要用于在后台处理一些耗时的逻辑操作,或者去执行某些长期运行的操作. 二.Service的创建 1.主要方法 IBinder onBind(Intent intent):必须 ...

  7. Selenium2Library使用Remote功能（转载并更新）

    在selenium2library库的open browser中,除了我们常用的url,browser外,还有几个不常用的参数.如:remote_url的用法 1.下载selenium-server- ...

  8. UML－类图，包图

    UML构造设计模型   一.类图  二.包图   三.组件图   四.部署图   一.类图     1.类:类由三格表示:类名,类的属性,类的操作              类名: 首字母大学     ...

  9. 解除被DenyHosts锁定的IP地址

    自己的本本无法ssh上服务器,提示 ssh_exchange_identification: read: Connection reset by peer 仔细回想,自己手贱把~下面的一个ssh文件删 ...

  10. 用gdb调试程序笔记: 以段错误(Segmental fault)为例

    用gdb调试程序笔记: 以段错误(Segmental fault)为例[转] 1.背景介绍2.程序中常见的bug分类3.程序调试器(如gdb)有什么用4.段错误(Segmental fault)介绍5 ...