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

Question

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

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

因为它使用生成器并且我必须支持 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

Is it safe to use when loading the babel-polyfill from a CDN?

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