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

What happens when async=true is used inside document.ready?

本文关键字：true 什么 async ready document 当在      更新时间：2024-06-29

当我们在document.ready内部调用属性为async="true"的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？

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

CCD_ 7属性在存在于初始HTML中的脚本中起着更大的作用——在"；准备就绪"-或者当添加了多个脚本元素并且执行顺序必须与DOM插入顺序匹配时：

设置此布尔属性以指示浏览器应在可能的情况下异步执行脚本。。

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

浏览器将开始加载由新脚本元素"引用的脚本；在元素被添加到DOM之后的某个时刻；并且所引用的脚本将仅在加载后执行。但是，insertBefore立即返回，并且引用的脚本不保证加载-async设置为什么并不重要。

在这种情况下，test.js代码保证只运行"；在之后的某个时刻添加脚本元素"；到DOM-在调用ready函数之后，这自然必须是，也就是添加元素的地方。

由于浏览器只有一个执行上下文，添加DOM元素是一个异步操作（写入正在执行的外部脚本），这也意味着test.js中的代码将只运行；在之后的某个处，就绪功能结束"；。并且，就绪函数在响应"0"而被调用之前将不会开始（或结束）；DOM就绪"；。

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

相关文章：