Question

当我们在async="true"内调用属性为document.ready的javascript时会发生什么。例如，

$(document).ready(function() {
var ma = document.createElement('script');
ma.type = 'text/javascript'; 
ma.async = true;
ma.src = 'test.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ma,s);
});

加载DOM后，$(document).ready内的脚本将立即执行。如果我们将async = true用于调用其中的脚本会发生什么？在DOM准备好之前将加载test.js？

Answer 1

通过DOM操作添加的脚本与添加它们的JavaScript不是同步的，与async属性无关。

async attribute在初始HTML中存在的脚本中扮演更重要的角色 - 在＆＃34; ready＆＃34;之前 - 或者添加多个脚本元素并且执行顺序必须与DOM插入顺序匹配时：

设置此布尔属性以指示浏览器应尽可能异步执行脚本..

..脚本插入的脚本在IE和WebKit中异步执行，但在Opera和4.0之前的Firefox中同步[与脚本元素的插入顺序]。 ..要请求脚本插入的外部脚本，请在浏览器[..]中设置async=false的插入顺序中执行要维护顺序的脚本。

浏览器将在元素添加到DOM＆＃34;之后的某个时刻开始加载新脚本元素引用的脚本。并且引用的脚本只会在加载后执行。但是，insertBefore会立即返回并且引用的脚本不保证会被加载 - 并不重要async设置的内容。

在这种情况下，test.js代码保证仅在添加脚本元素后的某些时刻运行＆＃34;＆＃34;到DOM - 在调用 ready函数之后，这必然是，这是添加元素的地方。

由于浏览器只有一个执行上下文，并且添加DOM元素是异步操作（执行外部脚本），这也意味着test.js中的代码将仅运行＆＃34;在某些之后就绪功能结束＆＃34;。并且，就绪函数在响应＆＃34; DOM ready＆＃34;而被调用之前不会启动（或结束）。

设置async标志（为任何值）不会改变上述情况。

在document.ready中使用async = true会发生什么？

1 个答案: