我可以用嗎<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上使用限制，並看到當下載速度很低時，它總是不起作用。