当浏览器遇到 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. 《慕客网：IOS基础入门之Foundation框架初体验》学习笔记 <五> NSDicionary + NSMutableDictionary

    int main(int argc, const char * argv[]) { @autoreleasepool { //字典, 存储的内存不是连续的 用key和value进行对应(键值) //k ...

  2. LINQ SQL分组取最近一条记录

    最近项目有一个需求,从订单表查询出每个客户最近一条订单记录.数据库表结构如下图 SELECT * FROM ( select ROW_NUMBER()over(partition by [custid ...

  3. [AapacheBench工具]web性能压力测试工具的应用与实践

    背景:网站性能压力测试是性能调优过程中必不可少的一环.服务器负载太大而影响程序效率是很常见的事情,一个网站到底能够承受多大的用户访问量经常是我们最关心的问题.因此,只有让服务器处在高压情况下才能真正体 ...

  4. debian和ubuntu的sh dash bash

    Ubuntu和debian 的 shell 默认安装的是 dash,而不是 bash.运行以下命令查看 sh 的详细信息,确认 shell 对应的程序是哪个:$ls -al /bin/sh dash ...

  5. 2014年小结之sql语句优化

    之前接手一个数据统计处理的小程序,本来逻辑上并没什么,只是数据量略大,某些表的数据达到了千万级别..因为是统计,所以免不了各种连接各种查询,结果这个小程序写完后运行一次要1个小时..这的确有点出乎意料 ...

  6. OpenStack虚拟机状态

    OpenStack创建一个虚拟机,涉及到三种状态,vm_state,task_state和power_state. 先总结几点: 电源状态(power_state):是hypervisor的状态,从计 ...

  7. uva 839 Not so Mobile-S.B.S.

    Before being an ubiquous communications gadget, a mobilewas just a structure made of strings and wir ...

  8. MySql 定时备份数据库

    每天零点备份一次数据库,备份文件放在指定目录(如果目录不存在则新建),按月存储: 将下面这段命令存储为一个 *.bat 文件,添加一个Windows任务计划程序(Task scheduler)指向这个 ...

  9. Head First HTML5 Programming 读书笔记

    1:HTML5引入了简单化的标记,新的语义和媒体元素,另外要依赖于一组支持web应用的js库. 2:关于js 对象是属性的结合 window对象是全局变量. document对象是window的一个属 ...

  10. Django数据库怎么给字段设置主键

    id = models.IntegerField(primary_key = True) 附: null :缺省设置为false.通常不将其用于字符型字段上,比如CharField,TextField ...