怎样理解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 ...
随机推荐
- RK3288 修改ddr频率
转载请注明出处:https://www.cnblogs.com/lialong1st/p/10912334.html CPU:RK3288 系统:Android 5.1 RK3288 的 ddr 频率 ...
- Java 关于日期加一天(日期往后多一天)
1.原来Java的日期添加不像.NET的.Add: import java.util.Date ; Date date=new Date();//取时间System.out.println(dat ...
- 用了pm2之后，如何让console.log('..')出现在控制台
使用 pm2 log 0 可以查看.当然这个 0 应该是应用的 id
- <JavaScript>使用onmousemove事件实现移动（拖拽）div 出现的关于offsetX的问题
出现的问题如下图所示(截屏看不出来看log) 再移动鼠标的过程中会不断的出现异常值导致拖动的div不断切换位置,回到左上角. 我以为是冒泡机制导致的所以添加了下面一段阻止冒泡,随便也阻止了默认事件,但 ...
- 《高性能mysql》笔记(第一章，mysql的架构与历史)
mysql的服务器逻辑架构图如下: 目前工作用的5.5版本,5.5版本开始mysql开始将innoDB作为默认的存储引擎,innoDB的表是基于聚簇索引建立的. mysql的存储引擎锁管理非常重要,在 ...
- 双缓冲技术局部更新原理之派生自View
package com.loaderman.customviewdemo; import android.content.Context; import android.graphics.Canvas ...
- Javescript——数据类型
原文链接:Understanding Data Types in JavaScript Data types are used to classify one particular type of d ...
- 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_03-用户认证-认证服务查询数据库-查询用户接口-接口定义
1.2.4 查询用户接口 完成用户中心根据账号查询用户信息接口功能. 在ucenter这个服务里面定义查询用户信息的接口 这个接口在auth的服务的loadUserByUserName这个方法里面被调 ...
- spark在windows的配置
在spark-env.cmd添加一行 FOR /F %%i IN ('hadoop classpath') DO @set SPARK_DIST_CLASSPATH=%%i 修改:log4j.prop ...
- laravel容器类make方法解释
容器类调用make方法时,如果没有已注册的key,那么会自动通过反射类实例化具体类 make /** * Resolve the given type from the container. * * ...