Chrome下测试async/defer对脚本加载执行顺序的影响——跟大家说的有些不同

时间 2019-11-07

标签 chrome 测试 async defer 脚本加载执行顺序影响大家有些不同栏目 Chrome 繁體版

原文原文链接

测试环境

咱们已知

咱们已知以下，不知道能够到网上找几篇相关文章，能够得出下面的结论html

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

先说测试结论

只列出和上面有冲突的点react

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

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

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

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

注：之因此有出入，应该是Chrome所作的优化。app

测试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>
复制代码

测试方法

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

测试详细过程

略。略。略。async

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