我可以用吗<script async> to load babel-polyfill?

Question

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

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

因为它使用Generators并且我必须支持Internet Explorer 11，所以我需要babel-polyfill ，因此我的HTML代码如下所示：

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

困扰我的是我正在同步加载Babel polyfill。 如果我将async添加到第一个脚本标记，我的代码可以工作，但我不确定这是否是确定性的，即代码是否只是偶然的，因为polyfill在调查模式脚本之前完成加载。

从CDN加载babel-polyfill时使用<script async>是否安全？

Answer 1

从CDN加载babel-polyfill时使用是否安全？

不它不是。 async脚本“一旦可用就执行”，并且不保证执行顺序。 所以在下面的例子中：

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

“polyfill”脚本有可能在“survey-modal”之后执行。 更好的方法如下：

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

在解析文档后下载defer脚本（因此它不会阻止页面呈现）但保证执行顺序。

PS：您提到当两个脚本都是异步时，您的代码都能正常工作。 是的，这是偶然的。 当从浏览器缓存加载polyfill时它将起作用，如果通过网络获取polyfill可能不起作用。

Answer 2

如果你使用async标签，你不能保证它会在你的模态之前加载，所以我不会那样使用它。

Answer 3

不，它不是确定性的，也不会一直有效。

如果你愿意，你可以在chrome上使用限制，并看到当下载速度很低时，它总是不起作用。