javascript - 动态javascript是否同步添加？

Question

此外，何时加载代码，设置.src属性或附加元素。为了显示：

var test = document.createElement('script');
test.src = 'some_path'; 
// is code loaded here?
document.head.appendChild(test);
// or here?
...
// or is it an asynch operation?

Answer 1

动态创建脚本元素时，在将元素插入文档之前不会加载或执行源文件。脚本的加载是异步的。这意味着您的代码执行以下操作：

1. 创建脚本元素
2. 分配源属性
3. 将元素放入文档中
4. 开始异步加载源文件
5. 加载后，执行脚本

编辑：感谢您指出设置async属性对脚本的加载行为没有任何影响。我从未真正使用过它并认为它会起作用，但它显然没有。我删除了声称会的部分。我做了一个例子来说明这一点。

Answer 2

Javascript 从上到下运行，除非它是一个函数、对服务器的异步调用，或者在等待某个事件的闭包中（即window.load()：）

您的代码如下：

var test = document.createElement('script');
//declare variable test to create script element
test.src = 'some_path'; 
//define element with src attribute 'some_path'

document.head.appendChild(test);
//place script element in head block

虽然我建议在服务器端创建动态脚本块，以避免由于异常和高负载/超时可能性而导致的并发症。

您可以在 Firebug 和 Chrome 开发工具中插入断点来单步执行您的脚本并查看发生了什么。更多信息：https ://developers.google.com/chrome-developer-tools/docs/javascript-debugging