js中async与defer

时间: 2019-02-14阅读: 326标签: js知识

<script>元素的几种常见属性:

async  异步加载,立即下载,不应妨碍页面其他操作,标记为 async 的异步脚本并不保证按照指定的先后顺序执行,因此异步脚本不应该在加载期间修改DOM,异步脚本一定会在页面的 load 事件前执行,不一定在 DOMContentLoaded 事件前后触发,js有依赖性时,用async很容易出错,async 是无序执行,自身加载完就会执行;


DOMContentLoaded 事件于window的onload事件不同:

onload事件是UI事件,是window对象的onload,当页面完全加载后(包括所有的图片、JS文件、CSS文件等外部资源),就会触发window的onload事件

DOMContentLoaded事件是HTML5事件,本来是document对象的事件,会冒泡到window对象,形成了完整DOM树之后就会触发(不理会图片、JS文件、CSS文件或其它资源是否已经下载完毕)

 defer 延迟脚本,异步加载,立即下载,但脚本会延迟到整个页面都解析完毕后再运行,HTML5规范要求按照出现的前后顺序执行,并且会先于 DOMContentLoaded 事件触发前执行,现实当中 defer 脚本不一定按照顺序执行,也不一定会先于DOMContentLoaded事件前执行,因此最好只包含一个延迟脚本,defer 是有序执行


async与defer区别:

相同点: 都是异步加载,不阻塞页面渲染;都可以只使用属性名,不定义属性值;都只对外部脚本适用(IE7之前针对嵌入式脚本使用defer,IE8+只支持外部脚本);

不同点: async 会在加载完成后立即执行,因此它是无序执行,但一定会在window的onload事件之前执行,DOMContentLoaded事件前后不确定;

defer 会等到整个页面解析完后再执行,一般会按照顺序执行,会先于DOMContentLoaded事件触发前执行;


JS加载执行顺序:

        如果没有async和defer属性,那么浏览器会立即执行当前JS脚本阻塞后面的脚本;

        如果有async属性,那么浏览器加载它会与加载其它资源并行进行,异步加载,它自身加载完毕后立马执行;

        如果有defer属性,那么浏览器加载它也会与其它资源并行进行,异步加载,该脚本会被延迟到整个页面全部解析完毕后再执行;

        DOMContentLoaded先于onload事件触发;

  type 可以看做为language(已经弃用)的替代属性,该脚本语言的MIME类型,默认为text/javascript;


src 要执行代码的外部文件;

<noscript>元素  只有在浏览器不支持脚本,或者支持脚本但被禁用时显示;


JavaScript 进阶问题列表

我在我的 Instagram 上每天都会发布 JavaScript 的选择题,并且同时也会在这个仓库中发布。从基础到进阶,测试你有多了解 JavaScript,刷新你的知识,或者帮助你的 coding 面试!

JS 中的垃圾回收

对于开发者来说,JavaScript 的内存管理是自动的、无形的。我们创建的原始值、对象、函数……这一切都会占用内存。当某个东西我们不再需要时会发生什么?JavaScript 引擎如何发现它、清理它?

TS与JS中的Getters和Setter究竟有什么用?

在本文中,我们讨论了getter 和 setter 在现代 Web 开发中的实用性。它们有用吗?什么时候使用它们是有意义的?尽管我不同意 getter 和 setter 完全是一个反模式。但它们在几种情况下能带来更多的实用性。

JS中for循环的常见题型

for循环示例;让用户输入行数,使用for循环嵌套打出倒着的星星出来,行数等于用户输入的数字 ;有1,2,3,4这么4个数,能组成多少个互不相同且不含有重复数字的三位数?都是多少?

javascript:void(0)的含义

首先,void关键字是javascript当中非常重要的关键字,该操作符指定要计算或运行一个表达式,但是不返回值。语法格式:void func()、void(func())

前端基础之BOM和DOM

JavaScript分为 : ECMAScript,DOM,BOM。BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。DOM (Document Object Model)是指文档对象模型

解密JavaScript执行上下文

首先我们先了解一下什么是执行上下文栈(Execution context stack)。分别展示了栈、堆和队列,其中栈就是我们所说的执行上下文栈;堆是用于存储对象这种复杂类型,我们复制对象的地址引用就是这个堆内存的地址

javascript中的依赖注入

使用没有依赖的模块,显然这是很难实现的。即使你创建了很好的像黑盒一样的组件,但总有个将所有部分合并起来的地方。这就是依赖注入起作用的地方,当前来看,高效管理依赖的能力是迫切需要的,本文总结了原作者对这个问题的看法。

js中&与&&,|与||的区别

&、|、~都是位操作符,而&&、|、~|都是逻辑操作!。&&是逻辑与运算符假前真后,||是逻辑或运算符真前假后,&是按位与操作两个数值的个位分别相与,同时为1才得1,只要一个为0就为0。

Js常用基础算法

冒泡排序;插入排序 过程就像你拿到一副扑克牌然后对它排序一样;快速排序;回文字符串;翻转字符串;字符串中出现最多次数的字符;数组去重;二分查找

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全