是“异步"吗?如果将脚本动态添加到 DOM，属性/属性是否有用? [英] Is the "async" attribute/property useful if a script is dynamically added to the DOM?

问题描述

这个问题与哪些浏览器支持<script async=";异步"/>?.

我最近看到一些脚本可以做这样的事情:

var s = document.createElement('script');s.type = '文本/javascript';s.async = 真；s.src = 'http://www.example.com/script.js';document.getElementsByTagName('head')[0].appendChild(s);

这是动态添加脚本到 DOM 的常用方法，这是 Steve Souders 的 IIRC 书中的更快的网站，"提示所有现代浏览器异步加载脚本(即，不阻止页面渲染或下载后续资产).

如果我是对的，s.async = true 语句有任何用处吗?即使对于支持该属性的浏览器，它也不是多余的，因为动态附加的脚本应该已经触发异步下载吗?

解决方案

规范(现在)规定不是解析器插入的script元素是异步的；async 属性与非解析器插入的 script 元素无关:

<块引用>

第三个是指示元素是否强制异步"的标志.最初，script 元素必须设置此标志.HTML 解析器和 XML 解析器对它们插入的 script 元素取消设置.此外，只要设置了force-async"标志的脚本元素添加了 async 内容属性，元素的force-async" 标志必须取消设置.

具有 async 内容属性当然意味着脚本将异步执行.规范语言似乎留下了强制同步执行脚本的机会(通过设置属性然后删除它)，但实际上这不起作用并且可能只是在规格非解析器插入的 script 元素是异步的.

这个指定的行为是 IE 和 Chrome 一直在做的，Firefox 多年来一直在做，现在的 Opera 也是这样(我不知道它什么时候从上面链接的答案中的旧行为改变了).

它很容易测试:

var script = document.createElement("script");script.src = "script.js";console.log("a");document.body.appendChild(script);console.log("b");

...script.js 是

console.log("脚本加载");

...将登录

<前>一个乙脚本已加载

This question is sort of a tangent to Which browsers support <script async="async" />?.

I've seen a few scripts lately that do something like this:

var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://www.example.com/script.js';
document.getElementsByTagName('head')[0].appendChild(s);

This is a common way to add a script to the DOM dynamically, which, IIRC from Steve Souders's book "Even Faster Web Sites," prompts all modern browsers to load the script asynchronously (i.e., not blocking page rendering or downloading of subsequent assets).

If I'm correct in that, does the s.async = true statement have any use? Wouldn't it be redundant, even for the browser(s) that support that property, since dynamically appended a script should already trigger asynchronous downloading?

解决方案

The specification (now) dictates that a script element that isn't parser-inserted is async; the async property is irrelevant to non-parser-inserted script elements:

The third is a flag indicating whether the element will "force-async". Initially, script elements must have this flag set. It is unset by the HTML parser and the XML parser on script elements they insert. In addition, whenever a script element whose "force-async" flag is set has a async content attribute added, the element's "force-async" flag must be unset.

Having the async content attribute does, of course, mean the script would be executed asynchronously. The spec language seems to leave an opportunity to force synchronous execution of the script (by setting the attribute and then removing it), but in practice that does not work and is probably just a bit of vagueness in the spec. Non-parser-inserted script elements are async.

This specified behavior is what IE and Chrome have always done, Firefox has done for years, and current Opera also does (I have no idea when it changed from the old behavior in the answer linked above).

It's easily tested:

var script = document.createElement("script");
script.src = "script.js";
console.log("a");
document.body.appendChild(script);
console.log("b");

...with script.js being

console.log("script loaded");

...will log

a
b
script loaded

这篇关于是“异步"吗?如果将脚本动态添加到 DOM，属性/属性是否有用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！