Chrome下测试async/defer对脚本加载执行顺序的影响——跟你们说的有些不一样

最新推荐文章于 2024-05-29 21:00:41 发布

weixin_33908217

最新推荐文章于 2024-05-29 21:00:41 发布

阅读量829

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c2cfbd5f265da611c2716e0

版权

测试环境

我们已知

我们已知如下，不知道可以到网上找几篇相关文章，可以得出下面的结论

脚本是按顺序加载和执行的
脚本的加载和执行会阻塞页面解析
defer：异步加载，页面解析完成后执行，保证顺序，会阻止DOMContentLoaded事件
async：异步加载，加载后立即执行，不保证顺序，会阻止Load事件
一个脚本同时添加defer和async，会忽略defer

先说测试结论

只列出和上面有冲突的点

脚本不是按顺序加载的，是同时加载多个
脚本加载会阻塞页面解析，但脚本执行可能和页面解析同时进行

另外，还有一种情况，就是有的脚本使用defer，有的使用async，这种情况的执行顺序是

先执行不带defer/async的脚本
再执行带defer属性的脚本
最后执行带async属性的脚本

只要有defer属性的脚本，async属性的脚本总是在DOMContentLoaded事件和Load事件之间执行。

注：之所以有出入，应该是Chrome所做的优化。

测试HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="http://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.js"></script>
  <script src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
</body>
</html>
复制代码

测试方法

下面开始验证我上面所说的测试结论。

测试详细过程

略。略。略。

测试HTML有了测试方法有了，还想让我截图？关注咱的微博@狂刀二

weixin_33908217

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Chrome下测试async/defer对脚本加载执行顺序的影响——跟你们说的有些不一样

测试环境我们已知我们已知如下，不知道可以到网上找几篇相关文章，可以得出下面的结论脚本是按顺序加载和执行的脚本的加载和执行会阻塞页面解析defer：异步加载，页面解析完成后执行，保证顺序，会阻止DOMContentLoaded事件async：异步加载，加载后立即执行，不保证顺序，会阻止Load事件一个脚本同时添加defer和async，会忽略defer先说测试结论只列出和上面...
复制链接

扫一扫