Javascript Async=true 属性
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16434338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript Async=true Attribute
提问by Jaimie Sirovich
I see this code sample in a certain unnamed vendor's documentation. It appears to load a script asynchronously, then invoke a function from it thereafter. I realize that the if-undefined check will prevent an overt error, but is this not totally incorrect?
我在某个未命名供应商的文档中看到了此代码示例。它似乎异步加载脚本,然后从它调用一个函数。我意识到 if-undefined 检查将防止明显错误,但这不完全不正确吗?
I believe that in IE8/9 it will work properly but block execution until the LOADER_URL script loads and executes; and I believe in many other browsers that do support the async attrbute, this will simply result in the inline-block executing the code inside the if-block only part of the time. The documentation states "tags are asynchronous and do not slow the loading of your pages."
我相信在 IE8/9 中它会正常工作但会阻止执行,直到 LOADER_URL 脚本加载并执行;我相信在许多其他支持异步属性的浏览器中,这只会导致 inline-block 仅在部分时间执行 if-block 内的代码。文档指出“标签是异步的,不会减慢页面的加载速度。”
<script type="text/javascript" src="LOADER_URL" async="true"></script>
<script type="text/javascript">
if (typeof (OBJECT_DEFINED_IN_LOADER_URL) != "undefined") { OBJECT_DEFINED_IN_LOADER_URL.Load(false); }
</script>
Looking at an earlier version of their documentation, it did not have the suggestion of the async attribute and did not make this claim. Did some technical writer make a mistake and say "yeah, that'll work" without testing adequately in all browsers? In IE <= 9 it will work all the time. And since async code is uber-fun to debug ... maybe it worked for them ...
查看他们文档的早期版本,它没有 async 属性的建议,也没有提出这个声明。是否有一些技术作家在没有在所有浏览器中进行充分测试的情况下犯了一个错误并说“是的,那会起作用”?在 IE <= 9 中它会一直工作。而且由于异步代码调试起来非常有趣......也许它对他们有用......
That's my suspicion :)
这是我的怀疑:)
回答by Strille
You were correct to be suspicious. The posted code is pretty much guaranteed to not work as intended in browsers supporting the async attribute.
你的怀疑是正确的。发布的代码几乎可以保证在支持 async 属性的浏览器中无法按预期工作。
Basically there are 3 "modes":
基本上有3种“模式”:
- If the async attribute is present, then the script will be executed asynchronously, as soon as it is available.
- If the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing.
- If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.
- 如果存在 async 属性,则脚本将在可用时异步执行。
- 如果 async 属性不存在但 defer 属性存在,则在页面解析完成后执行脚本。
- 如果这两个属性都不存在,则在用户代理继续解析页面之前,将立即获取并执行脚本。
Source: http://www.w3.org/html/wg/drafts/html/master/scripting-1.html
来源:http: //www.w3.org/html/wg/drafts/html/master/scripting-1.html
Note: The async attribute value is ignored, the mere presence of the attribute indicates that the script should be executed asynchronously. So setting the value to false will still be the same as setting it to true.
注意: async 属性值被忽略,该属性的存在表明脚本应该异步执行。因此,将值设置为 false 仍然与将其设置为 true 相同。
回答by Draykos
"Async=true", when supported by browser, basically means: browser will load script asynchronous and will execute it when it prefer.
So there is no garantee that the second script will be executed after the first one.
“Async=true”,当浏览器支持时,基本上意味着:浏览器将异步加载脚本并在它喜欢的时候执行它。
所以不保证第二个脚本会在第一个脚本之后执行。
You can safely use "asynch js load" only if you don't have, in page, any other code directly using objects you are loading in the asynch script.
只有在页面中没有任何其他代码直接使用您在异步脚本中加载的对象时,您才能安全地使用“异步 js 加载”。
I have evidence of all that, because I made a similar error in one of my project, but it will not be easy to replicate via fiddler or something similar.
我有这一切的证据,因为我在我的一个项目中犯了类似的错误,但是通过提琴手或类似的东西复制它并不容易。
So the code as proposed in the question will work sometime yes, sometime not.
因此,问题中提出的代码有时会起作用,有时不会。
回答by Subhan Ahmed
if async is true
如果异步是真的
The script will be downloaded and executeed as soon as possible and HTML page will be parsing simultaneously
脚本会尽快下载执行,同时解析HTML页面
in case of async is false
如果异步是假的
The process of script downloading and execution will be carried out before starting of any HTML page parsing hence HTML pasing will halt while script is downloaded and executed first.
脚本下载和执行的过程将在任何 HTML 页面解析开始之前进行,因此 HTML pasing 将在脚本首先被下载和执行时停止。
回答by Chetabahana
As described here, it is New in HTML5: async attributeassigned by 'async' as its value Specifies that the script that is executed asynchronously (only for external scripts).
如上所述这里,它是新的HTML5中:异步属性由“异步”指定为它的值指定是(仅适用于外部脚本)异步执行的脚本。
I found no problem so far on my site with this code in any browsers to call external script:
到目前为止,我在我的网站上没有发现任何问题,在任何浏览器中使用此代码调用外部脚本:
function include(src, attr, value)
{
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.setAttribute(attr, value);
script.async = 'async';
script.src = src;
head.appendChild(script);
}
include('LOADER_URL', 'custom-attr', 'custom-value');
回答by Christoph
Whether this makes sense heavily depends on the structure of the code.
这是否有意义在很大程度上取决于代码的结构。
You have to keep in mind that the browser caches certain files (and this includes scripts). Your scripts seems to be some kind of Library which loads required resources on demand (perhaps something similar like require.js), so this async code may make perfect sense, if the browser has everything in cache ( = the object is already there) to just interrupt the loading process.
您必须记住,浏览器会缓存某些文件(包括脚本)。您的脚本似乎是一种按需加载所需资源的库(可能类似于require.js),因此如果浏览器在缓存中拥有所有内容(= 对象已经存在),则此异步代码可能很有意义只是中断加载过程。