普通

<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. 关于hstack和Svstack

    关于hstack和Svstack import numpy as np>>> a = np.array((1,2,3))>>> aarray([1, 2, 3])& ...

  2. eclipse中web项目tomcat的设置

    1.  出现的问题: web开发中(eclipse环境),为本地项目添加tomcat,我们一般都会选择直接添加.在本次开发中突然遇到一个问题:因为项目涉及到文件上传,我利用MultipartFile进 ...

  3. MapUtils

    一. package com.wang.utils; import java.util.HashMap; import java.util.Map; import java.util.Set; pub ...

  4. lua基础（2）

    错误处理: local function add(a,b) assert(type(a) == "number", "a 不是一个数字") assert(typ ...

  5. laravel-admin利用ModelTree实现对分类信息的管理

    根据laravel的基本操作步骤依次完成如下操作:主要是参考laravel-admin内置的Menu菜单管理的功能,利用ModelTree实现业务中的Tree数据管理. 1. 创建模型 php art ...

  6. php set_magic_quotes_runtime() 函数过时解决方法

    PHP5.3中 bool set_magic_quotes_runtime ( bool $new_setting )函数过时.把函数: set_magic_quotes_runtime($newse ...

  7. Monty 大厅问题（Monty Hall Problem）也称作三门问题，出自美国大型游戏节目 Let's Make a Deal。

    Monty 大厅的问题陈述十分简单,但是它的答案看上去却是有悖常理.该问题不仅引起过很多争议,也经常出现在各种考试题中. Monty 大厅的游戏规则是这样的,如果你来参加这个节目,那么 (1)Mont ...

  8. default关键字

    default关键字在JDK8中有两个用处. 1.在switch语句的时候使用default int gender = 3; String genderString; switch (gender) ...

  9. SpringCloud学习系列-Eureka服务注册与发现(1)

    1.Eureka的基本架构 Spring Cloud 封装了 Netflix 公司开发的 Eureka 模块来实现服务注册和发现(请对比Zookeeper). Eureka 采用了 C-S 的设计架构 ...

  10. Idea创建多模块依赖Maven项目

    idea 创建多模块依赖Maven项目   本来网上的教程还算多,但是本着自己有的才是自己的原则,还是自己写一份的好,虽然可能自己也不会真的用得着. 1. 创建一个新maven项目 2. 3. 输入g ...