在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. OKMX6Q在ltib生成的rootfs基础上制作带QT库的根文件系统

    ltib每次执行后会在其目录下生成rootfs目录,并以其为基础生成rootfs.ext2.gz文件,而litb自带的QT库又太老,所以想到按照飞凌的<OKMX6X-S2-Qt4.8.5移植手册 ...

  2. Linux pmstat命令

      mpstat是linux一款实时系统监控工具.其报告与CPU的一些统计信息,这些信息存放在/proc/stat文件中.在多CPU系统里,其不但能查看所有CPU的平均状况信息,而且能够查看特定CPU ...

  3. SVN的安装和配置

    SVN为程序开发团队常用的代码管理,版本控制软件:下面我们来介绍TortoiseSVN的安装,和其服务器的搭建:(下面为windows 64位系统下的搭建) 闲来无事,就在本地搭建了一个SVN环境,网 ...

  4. php等比例压缩图片

    <?php function resizeImage($im,$maxwidth,$maxheight,$name,$filetype) { $pic_width = imagesx($im); ...

  5. Spring 数据库连接（Connection）绑定线程（Thread）的实现

    最近在看spring事务的时候在想一个问题:spring中的很多bean都是单例的,是非状态的,而数据库连接是一种有状态的对象,所以spring一定在创建出connection之后在threadloc ...

  6. cocos2dx 从2.2.6 到3.16 升级流水记录

    一个cocos2dx项目从2.2.6 升级至3.16 的过程,由于没有直升工具,类库升级也变动很大,有一部分需要手工完工升级.此记录供参考 1. 没有采用项目直升方式,先新建一个3.16的项目,然后把 ...

  7. 六、Html头部和元信息

    前面整理的都是html常用到的标签,这里整理一下html的的头部和元信息标签. 定义html都的头部要写在<head>标签里面,一般他还包含如下一些标签: 1,<script> ...

  8. Git知识总览(四) git分支管理之rebase 以及 cherry-pick相关操作

    上篇博客聊了<Git知识总览(三) 分支的创建.删除.切换.合并以及冲突解决>,本篇博客我们主要来看一下 rebase 变基相关的操作.rebase 操作和 merge 操作最终都可以达到 ...

  9. JAVA中限制接口流量、并发的方法

    JAVA中限制接口流量可以通过Guava的RateLimiter类或者JDK自带的Semaphore类来实现,两者有点类似,但是也有区别,要根据实际情况使用.简单来说, RateLimiter类是控制 ...

  10. Part 7：自定义admin站点--Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...