【发布时间】：2019-09-20 21:56:36
【问题描述】：
假设我有一个由 ReactDOM 渲染的客户端渲染的 React 应用，
<body>
<div id="root"></div>
<script src="/mybundle.js"></script> <!-- rendering happens here -->
<script async src='https://cdn.third-party.com/segment.js'></script>
<script async src='https://cdn.third-party.com/google_analytics.js'></script>
<script async src='https://connect.facebook.net/en_US/fbevents.js'></script>
<script async src='https://connect.facebook.net/en_US/sdk.js'></script>
<!-- etc.. various other 3rd party trackers and crap we have to load -->
</body>
我的理解是，即使指定了async，这些第三方库也会延迟onload 事件，直到它们的各种脚本被加载。
这会延迟我的 react 应用的渲染吗？
我已经对此进行了测试，如果我删除所有第三方 javascript，我们的第一次有意义的绘制在受限制的机器上会快 2 秒左右。这些库都表明它们不会减慢您的网站速度，但在实验上它们确实会。
有没有什么方法可以加载这些第三方库而不会破坏我的客户端呈现的单页应用程序的性能？
我知道.. 2.75 秒仍然非常慢。在进行重大改写之前，我试图快速取得胜利。
【问题讨论】：
-
嗨，我最近也有同样的问题，我发现 Addy Osmani 的这篇文章很有用 addyosmani.com/blog/script-priorities 也许你的一些外部脚本可以推迟
-
所有脚本都是独立的还是依赖于每个人的？
-
如果您将
async属性与defer交换或添加defer标签会发生什么，这有帮助吗？ -
这些都在body标签的末尾。我的印象是
defer在那里使用时什么都不做，但我会试试的。脚本有些独立。他们加载用于记录客户事件的分析跟踪器，但这绝对不是关键的，我们应该能够找到一种方法来延迟使用它们。
标签： javascript html reactjs single-page-application