script标签中的defer和async属性
默认情况下,浏览器是同步加载 JavaScript 脚本,即渲染引擎遇到<script>
标签就会停下来,等到执行完脚本,再继续向下渲染。如果是外部脚本,还必须加入脚本下载的时间。
如果脚本体积很大,下载和执行的时间就会很长,因此造成浏览器堵塞,用户会感觉到浏览器“卡死”了,没有任何响应。这显然是很不好的体验,所以浏览器允许脚本异步加载,下面就是两种异步加载的语法。
<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>
上面代码中,<script>
标签打开defer
或async
属性,脚本就会异步加载。渲染引擎遇到这一行命令,就会开始下载外部脚本,但不会等它下载和执行,而是直接执行后面的命令。
defer
与async
的区别是:defer
要等到整个页面在内存中正常渲染结束(DOM 结构完全生成,以及其他脚本执行完成),才会执行;async
一旦下载完,渲染引擎就会中断渲染,执行这个脚本以后,再继续渲染。一句话,defer
是“渲染完再执行”,async
是“下载完就执行”。另外,如果有多个defer
脚本,会按照它们在页面出现的顺序加载,而多个async
脚本是不能保证加载顺序的。
只有一个脚本的情况
没有defer
或async
属性,浏览器会立即下载并执行相应的脚本,并且在下载和执行时页面的处理会停止。
<script src="example.js"></script>
有了defer
属性,浏览器会立即下载相应的脚本,在下载的过程中页面的处理不会停止,等到文档解析完成后脚本才会执行。
<script defer src="example.js"></script>
有了async
属性,浏览器会立即下载相应的脚本,在下载的过程中页面的处理不会停止,下载完成后立即执行,执行过程中页面处理会停止。
<script async src="example.js"></script>
如果同时指定了两个属性,则会遵从async
属性而忽略defer
属性。
<script async src="example.js" defer async></script>
下图可以直观的看出三者之间的区别:
其中蓝色代表js脚本网络下载时间,红色代表js脚本执行,绿色代表html解析。
多个脚本的情况
两个脚本都没有defer
或async
属性,浏览器会立即下载并执行脚本example1.js
,在example1.js
脚本执行完成后才会下载并执行脚本example2.js
,在脚本下载和执行时页面的处理会停止。
<script src="example1.js"></script>
<script src="example2.js"></script>
有了defer
属性,浏览器会立即下载相应的脚本example1.js
和example2.js
,在下载的过程中页面的处理不会停止,等到文档解析完成才会执行这两个脚本。
HTML5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于DOMContentLoaded
事件执行。
在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded
事件触发前执行,因此最好只包含一个延迟脚本。
<script defer src="example1.js"></script>
<script defer src="example2.js"></script>
有了async
属性,浏览器会立即下载相应的脚本example1.js
和example2.js
,在下载的过程中页面的处理不会停止,example1.js
和example2.js
哪个先下载完成哪个就立即执行,执行过程中页面处理会停止,但是其他脚本的下载不会停止。标记为async
的脚本并不保证按照制定它们的先后顺序执行。异步脚本一定会在页面的load
事件前执行,但可能会在DOMContentLoaded
事件触发之前或之后执行。
<script async src="example1.js"></script>
<script async src="example2.js"></script>
小结
将脚本放在 </body>
前面就可以了,如果有依赖的则按照顺序放好。如果一定要放在head
标签里面,最好是加defer
属性。
script标签中的defer和async属性相关推荐
- script 标签中的defer 和 async 属性
浏览器在解析 HTML 的时候,如果遇到一个没有任何属性的 <script> 标签 ,就会暂停解析,先发送网络请求获取该 JS 脚本的代码内容,然后让 JS 引擎执行该代码,当代码执行完毕 ...
- script 标签上的 defer 和 async 属性是什么?
我们经常使用 script 标签向页面插入一个常规的 JavaScript 文件: <script src="/path/to/script.js"></scri ...
- JS中script标签defer和async属性的区别
向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解 ...
- script 标签中async 属性和defer 属性作用以及区别?
接下来我们对比下 defer 和 async 属性的区别: 其中蓝色线代表JavaScript加载:红色线代表JavaScript执行:绿色线代表 HTML 解析. 1)情况1 <scripts ...
- script标签中的async和defer
在程序中代码是一行一行执行的,html标签都是由渲染引擎来执行,代码执行时从上往下一行一行执行,当执行到alert(如下图),alert会阻塞后面代码的执行,当点击完确定之后,代码继续往下执行. ja ...
- script标签中defer和async的区别
defer 和 async属性都是去异步加载外部的JS脚本文件,它们都不会阻塞页面的解析,其区别如下: defer为true:延迟加载脚本,在文档完成解析完成开始执行,并且在DOMContentLoa ...
- script标签中的crossorigin属性
在前端监控逐渐完善的今天,页面中错误日志的上报可以说对我们的日常工作带来了极大的帮助. 而使用 window.onerror 事件来捕获 js 脚本中的错误信息是重要的手段 . 但是对于跨域的资源 , ...
- script标签中type为script type=text/x-template是个啥
写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...
- 【CSS】CSS在标签中添加多个class属性
CSS在标签中添加多个class属性 <!DOCTYPE html> <html><head><meta charset="utf-8"& ...
最新文章
- 详解面向对象、构造函数、原型与原型链
- 首次将项目从eclipse提交到服务器的SVN
- 赴日游个人签证门槛降低 年薪3万可申请
- 无稽之谈--关于我自己的程序世界
- 在龙芯1c上使用rt-thread统一标准的spi接口
- 通信工程/电子信息工程 保研/预推免/夏令营 面试真题/经验
- 二元二次方程例题_2元1次方程100道题 七年级数学下册二元二次方程组100道计算题及答案!......
- 业务关键路径最小成本试错《精益创业》
- 2021年质量员-设备方向-通用基础(质量员)考试总结及质量员-设备方向-通用基础(质量员)模拟考试题库
- C ++ Hello World和可爱的无情彩虹
- 【阿里巴巴大数据实践笔记】第9章:阿里巴巴数据整合及管理体系
- 360全景拍摄为什么要使用鱼眼镜头,与超广角镜头区别?
- 二十行代码去除图片水印(别再找工具修图啦)
- 基因结构注释软件PASA安装全纪录
- 2019全国大学生软件测试比赛,原创 安恒信息圆满支撑“2019全国大学生软件测试大赛”...
- RGB YUV的来历及相互转换
- 艾兰岛编辑器-粒子效果
- c语言空字符串不占空间,C语言中,字符串所占内存空间就是字符串有效字符的个数。...
- undefined reference to `__isoc99_sscanf‘
- 如何在 Python 中验证用户输入