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

Question

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

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

因为它使用生成器并且我必须支持 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。如果我将异步添加到第一个脚本标记，我的代码可以工作，但我不确定这是否是确定性的，即代码是否只是偶然工作，因为填充在调查模式脚本之前完成加载。

从 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 时它将起作用，如果通过网络获取它则可能不起作用。