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. sql的集合运算

    表的加减法 union:使用union 对表进行假发(并集)运算, union等集合运算符通常都会去除重复记录. select shohin_id, shohin_mei from shohin un ...

  2. img标签的方方面面

    <IMG>标签的方方面面 <img>标签是页面上最为重要的元素之一.很难想象一个页面上没有图片的样子,这样的页面效果将会大打折扣. 任何一个前端工程师想必对<img> ...

  3. Android Permissions管理之用户拒绝授权

    Android Permissions管理之用户拒绝授权,在Marshmallow之前的安卓版本,应用的权限只需要注册一下,应用就会获取到,在Marshmallow之后,为了安全,全新的权限模型出现, ...

  4. 网易云课堂_程序设计入门-C语言_第五周：函数_2完数

    2 完数(5分) 题目内容: 一个正整数的因子是所有可以整除它的正整数.而一个数如果恰好等于除它本身外的因子之和,这个数就称为完数.例如6=1+2+3(6的因子是1,2,3). 现在,你要写一个程序, ...

  5. Linux Kernel系列一：开篇和Kernel启动概要

    前言 近期几个月将Linux Kernel的大概研究了一下,以下须要进行深入具体的分析.主要将以S3C2440的一块开发板为硬件实体.大概包含例如以下内容: 1 bootloader分析,以uboot ...

  6. Linux--根文件系统的挂载过程分析

    前言: 本篇文章以S3C6410公版的Linux BSP和U-Boot来进行分析,文中全部提及的名词和数据都是以该环境为例,全部的代码流程也是以该环境为例来进行分析.哈哈.假设有不对或者不完好的地方, ...

  7. 提交时提示错误This Bundle is invalid.New apps and app updates submitted to the App Store must be built wit

    this bundle is invalid . new apps and app updates submitted to the app store must be built with publ ...

  8. python单/双下划线使用

    在Python编程中经常会遇到函数(function),方法(method)及属性(attribute)以下划线'_'作为前缀,这里做个总结. 主要存在四种情形: 1. object # public ...

  9. HTML5表单增强

    感觉最大的改变就是表单元素可以不写在form标签中.写在其他地方,加个form属性就能提交了别的嘛感觉没什么,表单验证也不能提示信息,感觉不实用 <!DOCTYPE html> <h ...

  10. OC中对象拷贝概念

    OC中的对象拷贝概念,这个对于面向对象语言中都会有这种的问题,只是不同的语言有不同的解决方式:C++中有拷贝构造函数,Java中需要实现Cloneable接口,在clone方法中进行操作.但是不过OC ...