关闭

js中async与defer

时间: 2019-02-14阅读: 981标签: 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>元素  只有在浏览器不支持脚本,或者支持脚本但被禁用时显示;


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2010

关闭

7个常见的 JavaScript 测验及解答

我相信学习新事物并评估我们所知的东西对自己的进步非常有用,可以避免了我们觉得自己的知识过时的情况。在本文中,我将介绍一些常见的 JavaScript 知识。请享用!

归并排序JavaScript实现_关于归并排序思路和代码实现

归并排序:其基本思想是分治策略,先进行划分,然后再进行合并,步骤是: 1.我们以数组[1, 5, 6, 2, 4, 3]举例,归并排序的第一步,将数组一分为2;2.接着将分成的数组继续一分为2,直到长度为1,我们构成如下二叉树(成树 从上往下)

原生js清除字符串所有空行的方法

在前端开发中,textarea的内容可能会存在空行的时候,但是我们在保存时并不希望有多余的空行,这就需要我们使用Js来清除字符串中的空行,只需要一个简单的正则表达式即可

js设备判断_判断移动端还是PC端?判断android还是ios?判断移动端浏览器类型?

js判断用户的浏览设备是移动设备还是PC?判断详细浏览器设备信息。判断微信、新浪、QQ打开。判断是android系统还是ios系统...

手写JavaScript中的bind方法

bind方法返回的是一个绑定this后的函数,并且该函数并没有执行,需要手动去调用。(从这一点看bind函数就是一个高阶函数,而且和call,apply方法有区别)。bind方法可以绑定this,传递参数。注意,这个参数可以分多次传递。

JavaScript中“javascript:void(0) ”是什么意思

expression 是一个要计算的 Javascript 标准的表达式。表达式外侧的圆括号是可选的,鉴于规范化,以及养成好习惯,建议写上去。当我们使用 void 操作符指定超级链接时,表达式会被计算但是不会在当前文档处装入任何内容。

JS 中的垃圾回收

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

Javascript实现模仿接口的3种方式

Javascript模仿接口可以有三种方式:1.注释法,此方法属于程序文档范畴,对接口的继承实现完全依靠程序员自觉 2.检查属性法,把要实现的接口方法添加到类属性列表里,通过定义好的检测反复检查是否已经实现了那些方法 3.鸭式辨形法

js可以设置网页默认为横屏状态吗?js设置网页横屏和竖屏切换

打开页面时通过 window.orientation 可以判断网页是横屏还是竖屏,如果是竖屏,给整个页面添加样式 transform: rotate(90deg); 这样,你的页面就显示横屏的效果了。 总的来说,结合window.orientationchange和window.orientation可以灵活的对网页进行变换。

一眼看穿JS变量,作用域和内存问题

这篇文章将梳理下环境,作用域链,变量对象和活动对象,以及内存管理问题。基本类型和引用类型的值,我们都知道JS中的数据类型有两大类,基本数据类型和引用数据类型,下面从三个方面来解剖他们

点击更多...

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