怎样理解script标签的defer属性和async属性
如果script标签是引用的外部js文件, 那就会有一个下载js文件这一过程, 为了不因为这个下载过程而阻塞页面解析与渲染, 我们需要一种机制来解决这一问题, 方法之一就是使用 defer和async属性.
方法1. 使用 defer属性
defer属性的作用是延迟脚本的执行, 只有等到DOM生成之后才会执行脚本. 类似在DOMContentLoaded事件下添加监听函数.
// test1.js
// console.log(document.body.nodeName); // test1.html
<!DOCTYPE html>
<html lang="zh"> <head>
<script defer src="./test1.js"></script>
</head> <body>
</body> </html>
defer 属性的运行流程主要有下面几步:
1. 浏览器下载的同时解析html
2. 发现带有defer的script标签时, 会在下载html的同时下载这个script标签的外部js文件
3. 下载并解析html完成后会触发 DOMContentLoaded事件, 但在这个事件触发之前, 带defer的js文件就会开始执行.
注意:
1. 多个带defer的script标签的最终执行顺序是跟它们在html中出现的先后顺序严格对应的
2. 对于不是加载外部js文件和动态生成的script文件, defer属性不生效
3. 使用defer加载的外部脚本不应该使用document.write()方法.
方法2. 使用async属性
async属性和defer属性都能解析加载script外部js文件引起的阻塞问题, 不过defer属性是在DOM载入完成以后才会执行, 而async是另开一个进程去下载脚本, 下载完成以后立刻执行, 执行的时候是会暂停解析的.
也就是说: async解决阻塞的方法是: 另开一个进程下载脚本, 这样就不会阻塞主进程html网页的解析.
// test1.js
// console.log("defer是DOM载入完成后执行.") // test2.js
// console.log("async是新开一个进程, 下载完成后就暂停主进程的解析, 执行下载的脚本.") <!DOCTYPE html>
<html lang="zh"> <head>
<script defer src="./test1.js"></script>
<script async src="./test2.js"></script>
</head> <body>
</body> </html>
注意:
1. 使用async不能保证脚本的执行顺序, 而是谁先下载完, 就先执行谁, 因此async适用于脚本直接没有依赖关系的情况. 反之在用defer;
2. 如果一个scritp标签同时有defer和async属性, 则defer失效, script的行为由async决定;
3. 在脚本中还是不能使用document.write()方法.
总结起来, defer和async区别在于, 前者是在html解析完毕后按顺序执行, 而async是单独下载, 完成后立即执行.
怎样理解script标签的defer属性和async属性的更多相关文章
- HTML <script> 标签的 defer 和 async 属性
HTMKL <script>标签中有defer和async属性,简单介绍一下两者的区别吧. 普通的script标签会让浏览器立即下载并执行完毕,执行也是按照先后顺序,再进行后面的解析. ...
- script标签的defer、async属性
之前一直对script标签的defer.async属性一知半解,直到看到了论坛上某大神发的图片,茅塞顿开!!!!!
- script标签中defer和async属性的区别
这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...
- script 标签的defer,async的作用，及拓展浏览器多线程，DOMContentLoaded
前端优化有一点就是优化js的执行时机,一般做法是将script放置于body的结束标签,以避免加载执行js 文件导致页面渲染阻塞的问题这种做法确实能防止页面阻塞,但是在页面渲染完成之后才去加载js文件 ...
- 【JavaScript性能优化】------理解Script标签的加载和执行
1.script标签是如何加载的?当浏览器遇到一个 < script>标签时,浏览器会停下来,运行JavaScript代码,然后再继续解析.翻译页面.同样的事情发生在使用 src 属性加载 ...
- HTML中<script>的defer属性与async属性
defer 属性会在 DOMLoaded 事件之前完成异步加载,加载不会阻塞 DOM 解析,并且 script 的顺序会按照 DOM 中的顺序加载. async 属性就是异步加载,没有什么顺序的保证.
- script标签中defer和async的区别（稀土掘金学习）
如果没有defer或async属性,浏览器会立即加载并执行相应的脚本.它不会等待后续加载的文档元素,读取到就会开始加载和执行,这样就阻塞了后续文档的加载. 下图可以直观的看出三者之间的区别: 其中蓝色 ...
- 您是不是奇怪为什么 <script> 标签中没有 type="text/javascript" 属性？
在 HTML5 中该属性不是必需的.JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言!
- Javascript高级编程学习笔记（2）—— Script标签
script标签 js在浏览器中的使用,肯定会涉及到script标签. 那么script标签有哪些属性呢? 1.async:异步加载(不让页面等待该脚本的加载执行,异步加载页面的其他部分) 2.cha ...
随机推荐
- Linux后台运行任务
[Linux]ssh命令行下多任务前后台切换 原文:https://my.oschina.net/huxuanhui/blog/13844 我们都知道,在 Windows 上面,我们要么让一个程序作为 ...
- VUE -- 对 Element UI table中数据进行二次处理
时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...
- what should I use .post vs .ajax?
what should I use .post vs .ajax? 问题: I've always had this dilemma困境 whether to use .post or .ajax f ...
- 快速安装python3
使用 rpm 包进行安装 先来介绍一下 IUS 这个社区,名字的全写是[Inline with Upstream Stable]取首字母,它主要是一个提供新版本RPM包的社区.具体使用可以查看官方文档 ...
- sql查询表的所有字段和表字段对应的类型
1.查询表的所有字段 select syscolumns.name from syscolumns where id=object_id('写上要查询的表名') 2.查询表的所有字段+表字段对应的类型 ...
- CORTEX-M3中断的现场保护问题
在<Cortex-M3 Devices Generic User Guide.pdf>中介绍了异常入栈和出栈的情况,详见2.3 Exception model.Cortex-M3内核的寄存 ...
- 蜜汁头文件&&slow slow read
slow slow read 板子 inline int read() { ; char last=' ',ch=getchar(); ') last=ch,ch=getchar(); +ch-',c ...
- java获取中文汉字的所有拼音
java获取中文汉字的所有拼音 中文汉字可能有很多读音,java中分别用1,2,3,4来区别,例如“作”字,就有三个读音,zuo1,zuo2,zuo4. java获取汉字读音拼音代码如下所示: S ...
- ABAP编辑器输入中文变成问号
在ABAP编辑器里输入汉字,点击空格后显示问号? 中英文环境下编辑都出现乱码 实用程序->设置 ->基于文本的编辑器 如果用老式编辑器,可以输入中文 试试打个补丁 GUI740 补丁17 ...
- CRM-项目记录
硬件篇 阵列R5 3个盘才能做R5阵列,还需要单独的一个SSD硬盘做系统盘 软件篇 跨域问题 SPRINGMVC 配置了跨域,也使用了跨域注解,但是依然不能解决问题 最后通过直接修改TOMCAT的WE ...