HTML中async脚本与阻塞脚本加载顺序及React应用性能影响咨询

关于async脚本与阻塞型脚本的加载执行顺序问题 #

让我逐个解答你的疑问：

1. async类型的script标签会先于阻塞型script标签完成加载吗？

不一定，这没有绝对的固定顺序。async脚本的核心特点是：下载过程不阻塞HTML解析，下载完成后立即执行，执行顺序完全取决于谁先完成下载。而阻塞型脚本（不带async/defer属性）会在浏览器解析到它时，暂停HTML解析流程，先下载该脚本，下载完成后立即执行，执行完毕才会继续解析后续HTML内容。

所以如果第三方的segment.js/google_analytics.js文件体积更小、CDN响应速度更快，它们完全可能比mybundle.js先完成加载；但如果mybundle.js已经在用户浏览器缓存中，或者本身加载速度更快，那阻塞型脚本会先完成加载。

2. 第三方脚本会影响mybundle.js的加载时间吗？

不会。浏览器会针对不同域名的资源发起并行请求（同一域名的并行请求数有上限，但这里第三方CDN和你的example.com是不同域名），所以async脚本的下载和mybundle.js的下载是同时进行的，不会互相抢占带宽或阻塞对方的加载流程。mybundle.js的加载时间不会因为这两个第三方脚本的存在而变长。

3. 第三方脚本会在mybundle.js之前完成下载与解析吗？

依然没有确定答案，这完全取决于文件大小、服务器响应速度、网络状况以及缓存情况：

• 如果segment.js只有几KB，而mybundle.js有几百KB，那第三方脚本很大概率先下载完成并解析执行；
• 如果mybundle.js已经在用户浏览器缓存中，那它会瞬间加载完成，比任何未缓存的第三方脚本都快。

另外要注意：async脚本之间的执行顺序也是无序的，segment.js和google_analytics.js谁先下载完谁先执行，它们之间也没有固定的先后顺序。

4. 这些第三方脚本会拖慢我的应用渲染速度吗？

分两种情况来看：

• 加载阶段：不会拖慢。因为并行下载不影响mybundle.js的加载进度，所以mybundle.js能按原有的时间完成加载，不会因为第三方脚本的下载而延迟应用的初始渲染。
• 执行阶段：可能有轻微影响，但通常可以忽略。JavaScript是单线程执行的，如果第三方脚本在mybundle.js执行前就下载完成，它们会立即抢占线程执行。如果这些脚本执行耗时很长（比如包含大量同步代码），会推迟mybundle.js的执行，进而延迟React应用的渲染。不过像Segment、Google Analytics这类第三方脚本通常都是轻量的，执行时间极短，对应用渲染的影响几乎可以忽略不计。

如果想要彻底避免这种潜在的影响，你可以考虑把mybundle.js放在async脚本之前，或者给mybundle.js也加上async属性（但要注意，React应用的脚本通常需要在DOM解析完成后执行，可能需要配合DOMContentLoaded事件，或者确保脚本执行时#root元素已经存在）。

内容的提问来源于stack exchange，提问作者Eric Conner