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. git使用前配置

    1. git config --global user.name "Trey" 2. git config --global user.email 164355949@qq.com ...

  2. shell ps1 提示设置

    PS1="\[\033[01;37m\]\u\[\033[00m\]@\[\033[01;31m\]localhost \t\[\033[00m\]:\[\033[01;35m\]\w\[\ ...

  3. jsp中利用java代码换行

    从数据库中取出的10条商品数据分两行显示,每行5条. <% for(int i=0; i<latestProducts.size(); i++) { Product p = latestP ...

  4. Android.Hack.02_Animations

    #01# TextView 和 ImageView TextView和Imageview切换卡顿,为了实现更好的切换,可以用动画来实现,系统自带的TextViewSwitcher 和ImageView ...

  5. Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理

    今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...

  6. centos 添加epel、remi仓库和ELRepo仓库

    centos使用yum安装软件非常方便,yum会自动安装软件的相关依赖.但是centos自带的源仓库,软件相对老旧并且不太全,所以我们可以添加第三方仓库,可以安装较新的软件版本. epel是fedor ...

  7. 在win8.1下安装laravel5.1时碰到的坑不少，但总算搞掂，真有点不容易。

    安装好php后,安装laravel的方法有如下几种. 1.先安装好composer, 再用composer下载资源并安装,命令如下: composer create-project laravel/l ...

  8. css3实现的三种loading动画（转载）

    收藏了: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  9. python----slots属性安全类

    问题:__slots__可以用于构造安全的类.如果一个类使用了__slots__那么它的属性就不在自由了. 下面举例说明: 1.自由属性. class person(object): def __in ...

  10. 论山寨手机与Android联姻 【3】手机是怎样生产出来的

    要说清楚MTK在商业模式上有什么优势,以及Android对于MTK未来的手机开发会有什么影响,首先得了解手机从设计,开发到生产的整个过程.让我们先来看看手机的生产过程.在生产制造环节,山寨手机和正牌手 ...