js异步加载 defer和async 比较

网上说法很多，很少一句话能总结清楚的，终于找到两句一针见血的描述，很到位：

相同点：都不阻塞DOM解析

defer ：顺序：保证先后顺序。解析：HTML 解析器遇到它们时，不阻塞（脚本将被异步下载），待文档解析完成之后，执行脚本。

async ：顺序：不保证先后顺序。解析：HTML 解析器遇到它们时，不阻塞（脚本将被异步下载，一旦下载完成，立即执行它），并继续解析之后的文档。

总结一下：defer 效果是：js异步下载完毕后且DOM解析完成后且DOMContentLoaded 事件触发之前按照按页面脚本出现次序顺序从上至下依次执行！

async 效果是：哪个js先下载就先执行，不按页面脚本出现次序顺序，js的执行一定是在 window的load事件触发之前

顺便一提：window的load事件会在页面中的一切都加载完毕时触发，但这个过程可能会因为要加载外部资源过多而颇费周折。

而DOMContentLoaded事件则在形成完成的DOM树之后就会触发，不理会图像、JavaScript文件、CSS文件或其他资源是否已经下载完毕。

个人建议：如果加载的JS存在依赖关系，建议使用defer来保证安全，否则使用async即可

已获得广泛浏览器支持，但使用时需要查询兼容性！

转载于:https://www.cnblogs.com/xmyxm/p/5767043.html

js异步加载 defer和async 比较相关推荐

【前端】JS异步加载
文章目录为什么要异步加载如何实现异步加载参考为什么要异步加载两个原因其实是一个意思. 原因1: JS是单线程的语言,它会同步的执行代码,从上往下执行但是,一旦网络不好,或要加载的js文件过 ...
实现JS异步加载的三种方法
一.为什么要写异步加载: ①js加载本身是属于同步加载的,加载js文件会阻塞文档,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作.但是有些工具方法需要按需加载,有一些工具js文件它是不 ...
JS 异步加载js的三种方案
js文件同步加载的缺点: 页面的js文件一般是同步加载,加载到js文件会阻断html和css的加载,要等到js文件加载完毕,才能继续向下执行,因为js文件可能会操作html和css:但有些js文件不会 ...
js延迟加载、js异步加载
1.js延迟加载 (1)js延迟加载是js性能优化的一种方式 (2)作用:为了提高网页的加载速度 (3)原理:等网页加载完成之后再加载js文件 ··需要优化的原 ...
知识点讲解五：处理js异步加载问题
文章目录前言环境代码思路原代码前言在新闻网站中大多采用的是异步加载模式,新闻条目会随滚动条的滚动而逐渐加载.当爬虫访问这类网站时得到的HTML数据仅仅是我们看到的页面数据,只有当我们向下滚 ...
turn.js异步加载实现翻书效果
<div class="m-art-cont"><script type="text/javascript" src="/Runti ...
JS异步加载及解决方式
1.js中的同步加载和异步加载有什么不同? javascript语言是单线程机制.所谓单线程就是按次序执行,执行完一个任务再执行下一个. 对于浏览器来说,也就是无法在渲染页面的同时执行代码. 同步加载 ...
turn.js 异步加载实现翻书效果
1.阅读翻书js /*** 电子翻书*/ //var width = 1080; //var height = 1680;var width = "10rem"; var heig ...
yepnope.js 异步加载资源文件
yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css. yepnope的优点: 可以同时处理javascript以及css 能够按条件 ...

js异步加载 defer和async 比较

js异步加载 defer和async 比较相关推荐

最新文章

热门文章