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

　　1.若<script>标签引用的是内部脚本，即如：

　　此时这两个属性不起任何作用，脚本会从上到下依次执行。

　　2.若<script>标签引用的是外部脚本，即如：

　　

　　此时标签中引入defer="defer"，表明此脚本会立即下载，但会延迟到整个页面都解析完成后再依次运行（此处的依次是指下载完成的先后顺序）；而引入async(XHTML写法：async="async"),表明次脚本会立即下载，并再下载完成后立即执行，即使此时文本正在执行，也会暂停下来执行下载完的脚本，并且不能保证脚本执行的先后顺序；<script>标签默认情况下是不会引入这两个属性的，所以默认行为是从上到下执行，为了避免在执行操作元素的脚本找不到还未渲染的元素而产生逻辑问题，通常情况下会将<script>标签引用的脚本申明到<body>标签后；

　　（建议使用外部脚本引用，这样会有利于后期代码维护，并且可以对引用脚本进行缓存）

<script>标签中的 defer 与 async区别的更多相关文章

  1. <script>标签里的defer和async属性 区别（待补充）

    defer与async的区别(表格显示): table th:first-of-type { width: 150px; } table th:nth-of-type(2) { } 区别 defer ...

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

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

  3. script标签中的async、defer属性

    Script标签是我们常用的引用js脚本的一种方式. 撸代码的时候,我们常常只写src属性,直接忽略其他属性. 最近发现了2个可以利用的属性:async.defer. 顾名思义async就是异步,在不 ...

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

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

  5. script标签里的defer属性

    入职新公司,看代码的时候注意到有的script标签中有一个defer属性,查了一下.在这里分享出来. 需要注意的有三点,其中前两点是在错误中分辨出来的: 错误来源:http://www.w3schoo ...

  6. 关于html中的 script标签中的 代码写法有效性? easyui tabs的href不能载入内容页面

    script标签, 即 html中的 js脚本区域中: 它其实就是一个 普通的 html标签, 在 html 渲染器 parser 看来, 它跟其他任何的普通 的 html标签 , 比如 p 标签, ...

  7. javaScript中的小细节-script标签中的预解析

    首先介绍预解析,虽然预解析字面意思很好理解,但是却是出坑出的最多的地方,也是bug经常会有的地方,利用好预解析的特性可以解决很多问题,并且提高代码的质量及数量,浏览器在解析代码前会把变量的声明和函数( ...

  8. 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量?

    <!DOCTYPE html> <!-- 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量? 在全局环境下的代码就是在页面加载阶段从上到下一边加载一边执 ...

  9. script标签中type为"text/x-template"或"text/html"

    写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...

随机推荐

  1. 《并行程序设计导论》——Pthreads

    这部分不需要看了. 因为C++11和BOOST比这个Pthreads要好一点. 如果不考虑移植性,在Windows平台上用核心编程的东西比C++11和BOOST更好控制.

  2. libJPEG-turbo库使用示例代码

    libJPEG库是用于编码数据为JPEG格式或者解码JPEG格式图片的常用库,OpenCV读取图像底层实现就是利用libJPEG库,而libJPEG-turbo则效率更高. 具体怎么编译编译libJP ...

  3. 【开发技术】Java生成验证码

    Java生成验证码 为了防止用户恶意,或者使用软件外挂提交一些内容,就得用验证码来阻止,虽然这个会影响用户体验,但为了避免一些问题很多网站都使用了验证码;今天下午参考文档弄了一个验证码,这里分享一下; ...

  4. jsp中${}

    jsp中${}----是EL表达式的常规表示方式目的是为了获取{}中指定的对象(参数.对象等)的值 如:${user.name}<====>User user = (User)reques ...

  5. PostgreSql问题：ERROR: column "1" does not exist

    摘录自:http://blog.csdn.net/shuaiwang/article/details/1807421 在PostgreSQL中,不论是在pgAdmin中还是在命令行控制台里面,在SQL ...

  6. Oracle创建、管理撤销表空间

    撤销管理模式: 用户通过设定撤销管理模式(undo mode)就可以灵活地选择使用手动撤销管理(manual undo management)或自动撤销管理(automatic undo manage ...

  7. Mysql覆盖索引 covering index 或者 index coverage

    组合索引 提到组合索引,大家都知道"最左前缀"原则.例如,创建索引 idx_name_age (name,age) ,通常情况下,where age=50 或者 where age ...

  8. Azure Powershell获取指定订阅下的虚拟机信息（ARM）

    为方便Azure用户导出已创建虚拟机的相关信息,特编写如下脚本: 详情脚本: # 登陆Azure Account Add-AzureRmAccount -EnvironmentName AzureCh ...

  9. Unity AssetBundle 游戏资源分类及关系

    --刚刚做完一个xlua的的热更项目,对AssetBundle资源分类总结一下.纯理论,闲谈知识,要是有建议,尽管提 ,不掺杂代码. --这里说说,AB是如何打包,如果下载,如何加载. 1.关键词理解 ...

  10. ssh密钥分发与ansible

    笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 当我们公司的服务器达到几十台或几百台或更高的时候,利用批量管理工具管理系统是我们要做的 常用的批量管理工具有ans ...