Javascript的defer和async

写在前面

  作为前端小白,在开发过程中,h5页面中加载js脚本,一般我们直接<script src="./index.js"></script>就加载完成了;最近在啃《JS高级》(P11)的时候,读到<script>标签的时候,发现它有俩个属性:defer和async;今天就来总结一下。

一、不写这俩个属性

  这里我就先说说我对页面加载的理解:

   html页面加载时,至上而下加载,当遇到外联的CSS和JS的时候,会停止对DOM的加载,转而加载外联的CSS和JS,当JS加载完成时,它会立即执行(所以一般JS都写在body的最下面),CSS和JS执行完成后,会接着加载之后的DOM结构。

二、defer-延迟脚本

  加上defer就变成延迟脚本,当加载到包含defer的JS脚本时,浏览器会开启一个新线程并马上下载JS文件,但是不会执行里面的代码;需要等到加载到</html>时,浏览器才会执行这两个JS脚本,这两个JS脚本时顺序执行的,先执行example1.js,后执行example2.js。

  包含defer的JS文件,会在DOMContentLoaded事件和loaded事件之前执行。(补充:DOMContentLoaded事件在Loaded事件之前)

三、async-异步脚本

 

  此时是的JS时异步脚本,当浏览器加载到这两个JS脚本时,浏览器开启新线程下载这俩个JS脚本,下载的时候浏览器主线程还在加载中;当加载JS脚本完成时,这俩个脚本会马上执行,此时主线程停止工作,这俩个JS脚本执行乱序,先执行example1.js,后执行example2.js还是先执行example2.js,后执行example1.js是不确定;当执行完这两个JS文件后,浏览器的主线程才会继续执行。

  包含async的JS文件,会在Loaded事件之前执行,在DOMContentLoaded事件的前后不一定。

总结

  我就直接拿过来用了~~

  

原文地址:https://www.cnblogs.com/houfee/p/9686572.html

时间: 2024-11-05 18:53:53

Javascript的defer和async的相关文章

JavaScript 的 defer 与 async

当解析器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档.但是我们可以将脚本标记为 defer,这样就不会停止文档解析,等到文档解析完成才执行脚本,也可以将脚本标记为 async,以便由其他线程对脚本进行解析和执行. 三者之间的区别? script 当解析器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档. defer script 当解析器遇到 script 标签时,文档的解析不会停止,其他线程将下

javascript延迟加载及异步(defer和async)

一直以来写代码的时候的常用习惯就是吧所有的js文件直接加载在文档的head标签里面,在写js文件的时候有时候获取一些文件对象的时候为空对象,这是由于文档结构还没有加载完,但是js文件已经加载完.也就是说虽然写了js语句来获取对象,但是由于dom结构还没有加载完成,因此获取到的是空对象,进一步测试发现在firebug的控制台下把赋值语句执行之后可以获得对象,同理是因为在文档已经得到显示之后文档结构已经处于加载完成的状态,所以可以直接获取到对应的文档对象. 解决方法用两种:defer和async.

defer=“defer”和async=“async”

<script type="text/javascript" src="demo_defer.js" defer="defer"></script> 立即下载,但延迟执行.即脚本将在页面完成解析时执行. 注:defer 属性仅适用于外部脚本,也就是在使用 src 属性时. <script type="text/javascript" src="demo_defer.js" as

&lt;script&gt; 的defer和async

<script src="../file.js" async="async"></script> file.js---- 仅仅只有alert("hello,world"); async 属性仅适用于外部脚本(只有在使用 src 属性时). 有多种执行外部脚本的方法: 如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行) 如果不使用 async 且 d

defer和async的详细区别

看过javascript高级程序设计的人,在javascript高级程序设计里,应该看到了介绍了有关defer和async的区别,可是比较浅显,而且也说得不是很清楚.下面我们来通过图片来详细了解下dfer和async的区别. 下面来看看这三句话: 1.<script src="script.js"></script> 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,"立即"指的是在渲染该 script 标签之下的文档元素之

HTML5 defer和async的区别

在HTML页面中插入Javascript的主要方法,就是使用<script>元素.这个元素由Netscape创造并在Netscape Navigator 2中首先实现.后来,这个元素就被加入到正式的HTML规范中.HTML4.01为<script>定义了6个属性,包括defer和async.defer和async都是可选的,且只对外部脚本文件有效. 一.当浏览器解析到script脚本,没有defer或async时: <script src="main.js"

脚本引用中使用defer和async用法和区别

是的,就是在页面脚本引用的时候设置defer或者async,为什么会有这两个属相来辅助脚本加载那,因为浏览器在遇到script标签的时候,文档的解析会停止,不再构建document,有时打开一个网页上会出现空白一段时间,浏览器显示是刷新请求状态(也就是一直转圈),这就会给用户很不好的体验,defer和async的合理使用就可以避免这个情况,而且通常script的位置建议写在页面底部(移动端应用的比较多,这两个都是html5中的新属性). 1.默认引用 script:<script type=&quo

JS - defer 和 async

普通 <script src="script.js"></script> 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,"立即" 指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行. async <script async src="script.js"></script> 有 async,加载和渲染后续文档元素的过程将和

javascript中defer的作用

javascript中defer的作用 <script src="../CGI-bin/delscript.js" defer></script>中的defer作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问题 加上 defer 等于在页面完全在入后再执行,相当于 window.onload ,但应用上比 window.onload 更灵活!defer是脚本程序强大功能中的一个"无名英雄".它告诉浏览器Script段包含了无需立即执行