異步 JS 在頭部加載

Question

我需要將腳本異步加載到頁面上。 我正在使用 createElement 方法在頭部動態插入腳本標記。 發生的事情是首先加載頁面源。 完成后，頭部中包含的所有元素將並行加載。 一旦這一切都加載完畢，我動態添加的腳本就會加載。

這在邏輯上是有道理的，但我正在尋找一種可以加速動態腳本加載的方法。 我仍然希望它是異步的（不想做 document.write），但如果這個腳本可以與 head 元素的其他腳本並行加載，我仍然會喜歡。 任何方式我都能得到這個工作

謝謝

Answer 1

在頂部放置幾行 javascript 創建動態腳本標簽。

<script>
var script = document.createElement("script");
    script.src = "yourfile.js";
    script.async = true; //asynchronous
    document.getElementsByTagName("head")[0].appendChild(script);
</script>

有關其他替代方案，請查看此鏈接： http://friendlybit.com/js/lazy-loading-asyncronous-javascript/

Answer 2

如果您使用 HTML5，您可以將屬性async添加到script元素。 這是最簡單的方法，無論您在哪里加載（但不是最兼容的）。 需要明確的是，即使上面提供的代碼也只有在使用 HTML5 時才有效。 問題是，您不必首先通過添加這樣一個腳本的所有麻煩來 go。

<script src="/path/to/your/js/here" async></script>

還要注意 XHTML 不允許屬性最小化，所以在 XHTML 中你必須使用

<script src="/path/to/your/js/here" async="async"></script>

此外，您還有一個defer屬性，該屬性將 javascript 的解析延遲到文檔加載完畢，這也可以用作defer="defer" ，這與我使用async顯示示例腳本包含的方式相同。 async和defer標簽都可以在同一個腳本元素中使用。

另請注意，這些屬性只能添加到文檔外腳本而不是內聯腳本，這意味着如果不使用src屬性，則不能使用async和defer 。

希望有所幫助：:)