怎样理解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 fdisk命令创建逻辑分区
[root@localhost ~]# fdisk /dev/sdb …省略部分输出… Command (m for help): n #建立新分区 Command action l logical ...
- 一个hin秀的小学三年级奥数题 [hin秀]
~~~~~~不知为何总会被小学的题虐哭QAQ,真的秀啊,毒害广大小朋友~~~~~~ 一个hin秀的小学三年级奥数题 [hin秀] 题目: 给出一个无限大的棋盘 n×n (n>0 , 是 ...
- js Map对象的用法
第一篇: Map: Map是一组键值对的结构,具有极快的查找速度. 举个例子,假设要根据同学的名字查找对应的成绩,如果用Array实现,需要两个Array: var names = ['Michael ...
- Python - celery 相关报错 - AttributeError: type object '_multiprocessing.win32' has no attribute 'WAIT_OBJECT_0'
报错场景 执行 celery worker -A tasks -l INFO 打开 worker 的时候报错无法进行 报错解决 Celery 的版本过高, 进行降级处理即可 pip instal ...
- Apache工作模式切换
一.apache运行模式切换 apache比较常用的工作模式有worker以及prefork两种方式 1.编译安装: 如果在编译时候不指定,系统默认的是prefork模式.如果需要换成worker模式 ...
- matlab学习——02整数规划(蒙特卡洛法,指派问题，混合整数规划)
02整数规划 蒙特卡洛法(随机取样法) 编写文件mengte.m,目标函数f和约束向量g function[f,g]=mengte(x); f=x(1)^2+x(2)^2+3*x(3)^2+4*x(4 ...
- Windows server 2008 R2 桌面服务器管理器打开提示：试图引用不存在的令牌
来源:https://social.technet.microsoft.com/Forums/zh-CN/90f376a3-2b52-46c1-be34-4a2dbf4fdea2/winserver2 ...
- .NET实体框架EF之CodeFirst
ADO.NET Entity Framework 以 Entity Data Model (EDM) 为主,将数据逻辑层切分为三块,分别为 Conceptual Schema, Mapping Sch ...
- 如何区分进程和线程ps -eLf
方式 使用ls /proc/pid/task/ 查看线程 使用ps -eLf命令/ps aux -L/ps aux -el 使用pstree 进程和线程 进程是资源分配的最小单位 线程是cpu时间片分 ...
- 域名购买、SSL证书申请使用和本地服务映射外网
万网购买域名 1.在如下网址购买,价格不是很贵,几块钱一年的都有:https://wanwang.aliyun.com/domain/?spm=5176.100251.111252.24.4ddd4f ...