普通

<script src="script.js"></script> 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即” 指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

async

<script async src="script.js"></script> 有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

defer

<script defer src="myscript.js"></script> 有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。（注意：带有defer属性的脚本执行也不一定按照顺序执行）

参见

javascript - defer 和 async 的区别 - SegmentFault 思否

JS - defer 和 async的更多相关文章

  1. JS—ajax及async和defer的区别

    ###1.ajax  “Asynchronous Javascript And XML”(异步 JavaScript 和 XML) 使用: 如不考虑旧版本浏览器兼容性, // 第一步创建xhr对象 v ...

  2. Js高设笔记1-2章 defer and async

    1,js是由ECMAscript ,dom ,bom组成的专为网页交互而设计的脚本语言.js是脚本语言之一. 2,MIME,是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的 ...

  3. js中sync、defer、async的区别

    <script src="script.js"></script> 没有 defer 或 async,浏览器会默认为同步sync,会立即加载并执行指定的脚本 ...

  4. javascript的defer和async的区别。

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

  5. script标签中defer和async属性的区别

    这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...

  6. defer 和 async 本地对象和宿主对象

    <script async></script> 没有defer和async的情况下是"同步执行"的,浏览器解析到这里的时候,会先加载资源完成后立即执行,并阻 ...

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

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

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

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

  9. defer和async的区别

    先来试个一句话解释仨,当浏览器碰到 script 脚本的时候: <script src="script.js"></script> 没有 defer 或 a ...

随机推荐

  1. 生产服务器上安装Python

    2018-05-17 生产环境的服务器(以下简称内网服务器)由于安全限制,可能无法连接外网.这种情况下将无法直接使用pip命令安装python的包 一.更改pip源 - 默认pip是使用Python官 ...

  2. centos--软件源--本地软件源---离线安装

    一.软件源配置文件 1./etc/yum.conf 配置文件 [main] cachedir=/var/cache/yum #yum下载的RPM包的缓存目录 keepcache= #缓存是否保存,1保 ...

  3. Juery入门2

    1.Jquery操作文档 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  4. CSS布局方式

    1.内边距 padding <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  5. Wannafly挑战赛22 B 字符路径 （ 拓扑排序+dp ）

    链接:https://ac.nowcoder.com/acm/contest/160/B 来源:牛客网 题目描述 给一个含n个点m条边的有向无环图(允许重边,点用1到n的整数表示),每条边上有一个字符 ...

  6. Web Api 接口返回值不困惑：返回值类型详解

    前言:已经有一个月没写点什么了,感觉心里空落落的.今天再来篇干货,想要学习Webapi的园友们速速动起来,跟着博主一起来学习吧.之前分享过一篇 WebApi 接口参数:传参详解,这篇博文内容本身很基础 ...

  7. 关于3.1 jmu-Java-03面向对象基础-01-构造函数与toString (3 分)

    PTA显示Compiler did not create the expected binary 不知所措   package nn;  import java.util.Scanner;       ...

  8. c和java中各种数据类型所占字节

      c java char 1 2 short 2 int 4 long 4 8 float 4 double 8

  9. Python 运算符Ⅳ

    Python比较运算符 以下假设变量a为10,变量b为20: 以下实例演示了Python所有http://www.xuanhe.net/比较运算符的操作: 以上实例输出结果: Python赋值运算符 ...

  10. 对promise.all底层的实现的研究

    1.Promise.all(iterable)返回一个新的Promise实例,此实例在iterable参数内素有的Promise都fulfilled或者参数中不包含Promise时,状态变成fulfi ...