脚本引用中使用defer和async用法和区别

是的,就是在页面脚本引用的时候设置defer或者async,为什么会有这两个属相来辅助脚本加载那,因为浏览器在遇到script标签的时候,文档的解析会停止,不再构建document,有时打开一个网页上会出现空白一段时间,浏览器显示是刷新请求状态(也就是一直转圈),这就会给用户很不好的体验,defer和async的合理使用就可以避免这个情况,而且通常script的位置建议写在页面底部(移动端应用的比较多,这两个都是html5中的新属性)。

1.默认引用 script:<script type="text/javascript" src="x.min.js"></script>   

当浏览器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档。

2.async模式 <script type="text/javascript" src="x.min.js" async="async"></script>

 当浏览器遇到 script 标签时,文档的解析不会停止其他线程将下载脚本,脚本下载完成后开始执行脚本,脚本执行的过程中文档将停止解析,直到脚本执行完毕。

3.defer模式 <script type="text/javascript" src="x.min.js" defer="defer"></script>

 当浏览器遇到 script 标签时,文档的解析不会停止,其他线程将下载脚本,待到文档解析完成,脚本才会执行

所以async和defer的最主要的区别就是async是异步下载并立即执行,然后文档继续解析,defer是异步加载后解析文档,然后再执行脚本,这样说起来是不是理解了一点了;

它们的核心功能就是异步,那么两种属性怎么去区分什么情况下用哪个那,主要的参考是如果脚本不依赖于任何脚本,并不被任何脚本依赖,那么则使用 defer,如果脚本是模块化的,不依赖于任何脚本,那么则使用 async;主要功能点说完了,小伙伴们有没有分清楚他们的区别了那。

时间: 2024-11-16 01:37:02

脚本引用中使用defer和async用法和区别的相关文章

Delphi中destroy, free, freeAndNil, release用法和区别

Delphi中destroy, free, freeAndNil, release用法和区别 1)destroy:虚方法 释放内存,在Tobject中声明为virtual,通常是在其子类中override 它,且要加上inherited关键字,才能保证派生类对象正确地被销毁;但destroy一般不能直接用,为什么?当一个对象为nil,我们仍然调用destroy,会产生错误.因为destroy是虚方法,它要根据对象中的头四个字节找到虚拟方法表Vmt的入口地址,从而找到destroy的入口地址,所以

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

script标签存在两个属性,defer和async,因此script标签的使用分为三种情况: 1.<script src="example.js"></script> 没有defer或async属性,浏览器会立即加载并执行相应的脚本.也就是说在渲染script标签之后的文档之前,不等待后续加载的文档元素,读到就开始加载和执行,此举会阻塞后续文档的加载: 2.<script async src="example.js"></

defer和async的详细区别

看过javascript高级程序设计的人,在javascript高级程序设计里,应该看到了介绍了有关defer和async的区别,可是比较浅显,而且也说得不是很清楚.下面我们来通过图片来详细了解下dfer和async的区别. 下面来看看这三句话: 1.<script src="script.js"></script> 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,"立即"指的是在渲染该 script 标签之下的文档元素之

oracle中delete drop truncate的用法和区别

数据库的运维中,经常会遇到delete drop truncate的操作,那么如何去把握它们的用法和区别呢? 比如当数据库空间爆满,已经增长到存储空间单个存储文件的最大值32G.你需要通过一些办法释放掉表空间或者扩容表空间来解决问题. 一般当系统中大量使用分区表,而针对分区表清除数据,是不会释放表空间的,必须把分区drop掉,才会释放空间. 下面我们具体了解一下这三个命令: 一.delete 1.delete是DML,执行delete操作时,每次从表中删除一行,并且同时将该行的的删除操作记录在r

Java中super和this的用法和区别

许多同学在学习Java时分不清楚this和super的用法和区别,今天偶然发现一片加精的博文,看完内容准备自己也写下来积累一下 1.如果想在子类的构造方法中调用父类的构造方法,必须在子类的构造方法中使用super();且必须将其放在首句 public class L1106Demo06 { public static void main(String[] args) { lake M=new lake(); } } /*super方法的用法1. * 在子类的构造方法中若果要想要调用父类的构造方法

php中str_replace和str_ireplace的用法和区别

str_replace() 函数 定义:使用一个字符串替换字符串中的另一些字符,对大小写敏感的搜索 语法: str_replace(find,replace,string,count) str_ireplace() 函数 定义:使用一个字符串替换字符串中的另一些字符,对大小写不敏感的搜索 语法:str_ireplace(find,replace,string,count) str_replace详解 在都不使用数组时,该函数直接使用replace替换所有的search并返回替换后的字符串.如:s

java中抽象类和接口的用法和区别

一.抽象类 1.抽象类 包含一个抽象方法的类就是抽象类 2.抽象方法 声明而未被实现的方法,抽象方法必须使用abstract关键词字声明 public abstract class People { //关键词abstract,声明该类为抽象类 public int age; public void Num() { } public abstract Name(); //声明该方法为抽象方法 } 3.抽象类被子类继承,子类(如果不是抽象类)必须重写抽象类中的所有抽象方法 4.抽象类不能被直接实例

JS中substr和substring的用法和区别

一.substr 方法 返回一个从指定位置开始的指定长度的子字符串.string.substr(start [, length ]) 注意: length可选项.如 length 为 0 或负数,将返回一个空字符串.如果没有指定该参数,则子字符串到 string 的最后. let words = $("#wxWords").val(); let first = words.substr(0, 1) //截取第一个文字 let second = words.substr(1, 1) //

JS中!=、==、!==、===的用法和区别

1.对于string,number等基础类型,==和===是有区别的 1)不同类型间比较,==之比较"转化成同一类型后的值"看"值"是否相等,===如果类型不同,其结果就是不等 2)同类型比较,直接进行"值"比较,两者结果一样 2.对于Array,Object等高级类型,==和===是没有区别的 进行"指针地址"比较 3.基础类型与高级类型,==和===是有区别的 1)对于==,将高级转化为基础类型,进行"值&quo