我可以使用<script async>加载babel-polyfill吗？

Question

我的页面上有一个模态对话框，当用户与页面进行某种形式的交互时，该对话框会弹出。

我用React制作了它，并使用webpack创建了一个整洁的小包，通过脚本标签将其包含在我的页面中。

因为它使用生成器，而且我必须支持Internet 11，所以我需要巴贝尔-聚脂，所以我的代码如下所示：

<script src="//cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.9.1/polyfill.min.js"></script>
<script src="/survey-modal.js" async></script>

困扰我的是，我正在同步加载Babel多边形填充。如果我将异步添加到第一个脚本标记中，我的代码就能工作，但我不确定这是否是确定性的，也就是说，代码是否只是偶然地工作，因为多填充在调查模式脚本之前完成了加载。

当从CDN加载babel-聚脂填充时，使用安全吗？

Answer 1

当从CDN加载babel-聚脂填充时，使用安全吗？

不不是的。async脚本“一旦可用”就会执行，执行顺序也得不到保证。因此，在以下示例中：

<script src="polyfill.min.js" async></script>
<script src="survey-modal.js" async></script>

有一种可能性，“多填充”脚本后执行“调查-模式”。更好的办法如下：

<script src="polyfill.min.js" defer></script>
<script src="survey-modal.js" defer></script>

defer脚本是在文档被解析后下载的(因此它不会阻止页面呈现)，但是执行的顺序是可以保证的。

PS:您提到了当两个脚本都是异步的时候，您的代码可以工作。是的，这是偶然的。它将在从浏览器缓存加载多填充时工作，如果通过网络获取则可能无法工作。

Answer 2

如果您使用异步标记，您不能保证它会在您的模式之前加载，所以我不会那样使用它。

Answer 3

不，这不是决定性的，也不会总是起作用。

如果您愿意，您可以使用节流的铬，并看到，当下载速度很低，它将不会总是工作。