当浏览器遇到 script 标签时，文档的解析将停止，并立即下载并执行脚本，脚本执行完毕后将继续解析文档。但是我们可以将脚本标记为 defer，这样就不会停止文档解析，等到文档解析完成才执行脚本，也可以将脚本标记为 async，以便由其他线程对脚本进行解析和执行。

三者之间的区别？

script

当浏览器遇到 script 标签时，文档的解析将停止，并立即下载并执行脚本，脚本执行完毕后将继续解析文档。

defer script

当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，待到文档解析完成，脚本才会执行。

async script

当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，脚本下载完成后开始执行脚本，脚本执行的过程中文档将停止解析，直到脚本执行完毕。

什么情况下使用 defer 和 async？

  1. 如果脚本不依赖于任何脚本，并不被任何脚本依赖，那么则使用 defer。
  2. 如果脚本是模块化的，不依赖于任何脚本，那么则使用 async。

转载自：http://www.webhek.com/javascript-defer-async

JavaScript标记上的defer与async的作用与区别的更多相关文章

  1. 脚本引用中的defer和async的用法和区别

    之前的博客漫谈前端优化中的引用资源优化曾经提到过脚本引用异步设置defer.async,没有细说,这里展开一下,谈谈它们的作用和区别,先上张图来个针对没用过的小伙伴有个初始印象: 是的,就是在页面脚本 ...

  2. javascript延迟加载及异步(defer和async)

    一直以来写代码的时候的常用习惯就是吧所有的js文件直接加载在文档的head标签里面,在写js文件的时候有时候获取一些文件对象的时候为空对象,这是由于文档结构还没有加载完,但是js文件已经加载完.也就是 ...

  3. javascript中的defer和async学习+javascript执行顺序

    一.defer和async 我们常用的script标签,有两个和性能.js文件下载执行顺序相关的属性:defer和async defer的含义[摘自https://developer.mozilla. ...

  4. javascript的defer和async（转载）

    http://ued.ctrip.com/blog/?p=3121 我们常用的javascript标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自http ...

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

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

  6. script的defer和async

    我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Elem ...

  7. <script>标签中的 defer 与 async区别

    在html里,使用<script>标签对脚本进行外部或内部引用,<script>标签包含了两个特殊的属性:defer与async,他们的区别如下: 1.若<script& ...

  8. JavaScript 的 defer 与 async

    当解析器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档.但是我们可以将脚本标记为 defer,这样就不会停止文档解析,等到文档解析完成才执行脚本,也可 ...

  9. 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...

随机推荐

  1. DP大作战—状态压缩dp

    题目描述 阿姆斯特朗回旋加速式阿姆斯特朗炮是一种非常厉害的武器,这种武器可以毁灭自身同行同列两个单位范围内的所有其他单位(其实就是十字型),听起来比红警里面的法国巨炮可是厉害多了.现在,零崎要在地图上 ...

  2. ruby 删除文件

    f = "app/assets/#{vm.uuid}.rrd" if FileTest::exist?(f) File.delete(f) end

  3. chrome升级54以后，显示Adobe Flash Player 因过期而遭到阻止

    请直接下载 最新的Adobe flash player 离线安装包.经测试,在线安装不管用. 百度云地址: install_flash_player_23_ppapi.exe  密码:8c2i

  4. 如何删除TFS的Team Project

    我们可以使用Visual Studio或Web新建一个TeamProject,但是删除时却没有一个合适的图形界面删除我们不想要的Team Project,所以此时就可以使用命令TFSDeletePro ...

  5. Linked List Cycle

    Given a linked list, determine if it has a cycle in it. /** * Definition for singly-linked list. * s ...

  6. IOS版本被拒的经历

    IOS版本被拒的经历: 1,登陆方式依赖外部平台 因为我们的APP是只用微博登陆,想做成类似meerkat类型的,也能各种消息都同步微博. 结果当然行不通,这个确实是不听好人言,网上多个人都说过这个问 ...

  7. WordCount Analysis

    1.Create a new java project, then copy examples folder from /home/hadoop/hadoop-1.0.4/src; Create a ...

  8. python singleton

    方法一:用元类的方式实现一个singleton. liuxiaoyan@development:~/mysite$ cat Singleton.py class Singleton(type): &q ...

  9. 我的NopCommerce之旅(6): 应用启动

    一.基础介绍 Global.asax 文件(也称为 ASP.NET 应用程序文件)是一个可选文件,该文件包含响应 ASP.NET 或 HTTP 模块所引发的应用程序级别和会话级别事件的代码. Appl ...

  10. [转]Highcharts仪表盘制作

    http://www.runoob.com/highcharts/highcharts-guage-solid.html 本文转自:http://blog.csdn.net/javaliuzhiyue ...