如何在按鈕單擊異步上附加javascript

Question

為了動態追加腳本，我們需要創建script元素並添加script元素的src屬性，最后將script元素追加到head標記（或任何其他標記）中。 但是行為是同步的，頁面被阻塞，直到javascript完全加載為止。 我想知道是否有任何可能的解決方法，可以在不使用xhr的情況下異步嵌入javascript。

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'urlofthescript';
$("#someElement").append( script );
//the above line blocks the UI until it gets loaded. Why?

Answer 1

除非您使用async屬性 ，否則<script src="...">標記將始終是同步的。 但是，如果您<script>code goes here</script>插入<script>code goes here</script> ，則執行將立即開始（無需放棄JS線程即可）。 因此，將代碼構造為字符串或通過AJAX加載，然后將document.createTextNode(code) ， document.createElement('script') ， appendChild代碼加載到腳本中，然后將腳本加載到文檔中。 另一種可能性是使用最近出現的一些出色的模塊系統，例如RequireJS，為您解決所有這些問題。