js中async与defer

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


44道JS难题

国外某网站给出了44道JS难题,这些题涉及面非常广,涵盖JS原型、函数细节、强制转换、闭包等知识,而且都是非常细节的东西,透过这些小细节可以折射出很多高级的JS知识点。

JS 超类和子类

看到javascript高级程序设计的面向对象章节看到超类与子类这个概念词,不懂上度娘查了才知道是怎么一回事。说到超类与子类,就不得不提起原型模式,原型对象,原型链与原型链继承了

js中void 0 与 undefined

偶然看到一个问题:为什么有的编程规范要求用 void 0 代替 undefined?如果不知道这个答案的小伙伴,第一反应就要问void 0是什么鬼?

document.write和innerHTML的区别

document.write只能重绘整个页面,innerHTML可以重绘页面的一部分。 document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。

js中delete关键字

delete关键字的作用:删除对象的属性 语法:delete 对象.属性、可以删除没有使用var关键字声明的全局变量(直接定义在window上面的属性)、删除数组元素、不能删除内置对象的属性、不能直接删除从原型上继承的属性

js的微任务和宏任务

宏任务:当前调用栈中执行的代码成为宏任务。微任务: 当前(此次事件循环中)宏任务执行完,在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。

谈谈super(props) 的重要性

我听说 Hooks 最近很火。讽刺的是,我想用一些关于 class 组件的有趣故事来开始这篇文章。你觉得如何?本文中这些坑对于你正常使用 React 并不是很重要。 但是假如你想更深入的了解它的运作方式,就会发现实际上它们很有趣。

instanceof与constructor的区别

instanceof 的作用是判断实例对象是否为构造函数的实例,实际上判断的是实例对象的__proto__属性与构造函数的prototype属性是否指向同一引用;constructor 的作用是返回实例的构造函数,即返回创建此对象的函数的引用

前端与编译原理——用JS写一个JS解释器

说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念。作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于“抽象语法树(AST)”。但这仅仅是个开头而已。编译原理的使用,甚至能让我们利用JS直接写一个能运行JS代码的解释器。

js dom是什么?_JS中的DOM知识概览

JS中的DOM知识概览:文档对象模型,是针对 HTML 和 XML 文档的一个 API (应用程序编程接口), 描绘了一个层次化的节点树。 web 浏览器浏览一个页面的时候,DOM 就在幕后把你编辑的网页文档转换成一个文档对象。

内容以共享、参考为目的,请勿用于商业用途。其版权归原作者所有,如有侵权,请与小编联系,情况属实将予以删除!

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

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