你能证实我对 HTML5 的理解吗 <script async>属性？
- 页面中其他代码引用的任何库都不应指定异步属性。
例如，我的脚本引用可能看起来像这样:
<script src="jquery..." /> <!-- async not used - ensure that this is loaded before JQuery UI and my code -->
<script src="jquery.ui..." /> <!-- async not used - ensure that this is loaded before my code -->
<script src="my_code1.js" async /> <!-- async used, for page load performance -->
<script src="my_code2.js" async /> <!-- async used, for page load performance -->
- 对于
$(document).ready(function () { }中的任何代码块，我可以放心，所有异步脚本都已经加载。
我有这个权利吗？
最佳答案
对于所有新的 HTML5 功能，我认为找到答案的最佳方法是在尽可能多的当前浏览器上对其进行测试。作为一般规则，旧浏览器应该完全忽略异步标志，因此代码应该按预期工作，按顺序从上到下解析。
只要浏览器在处理它们时不一致，如果您不确定它们是否有效，就应该避免在生产代码中使用它们。
这个特性的主要问题是，支持它的浏览器，事件被触发的顺序是什么，例如，如果你在异步加载的脚本中定义了一个 jQuery 就绪函数，它会被触发吗？您的就绪事件是在加载异步脚本之前还是之后触发？
我已经创建了几个测试文件，非常欢迎您在不同的浏览器上运行它们以查看它们的行为。
简答
关于@Dave 的假设:
For any code in a
$(document).ready(function(){}block, I can be assured that all async script have already loaded.
到目前为止看起来不像，非常不一致。在 Chrome 中，主就绪事件在异步文件加载之前触发，但在 Firefox 中，它在它之后触发。
jQuery 开发人员将不得不对此做出决定，他们是否愿意(并且能够)在未来支持它。
测试页
我的测试脚本会吐出一个字符串，向您显示其不同部分的执行顺序。它可以通过以下方式构建:
D: 表示主文件中的脚本 block 被执行了。有可能 后跟
:ok如果函数在 异步加载的脚本(如果已定义)， 或:undefined如果不是。R: 这意味着主文件中的 jQuery 就绪事件已执行。 如果 异步加载脚本中的函数 如果已定义，或者
:undefined如果它是 不是。L:异步加载脚本文件已执行。
AR:异步加载脚本中的 jQuery 就绪事件已 执行。
测试结果
支持异步的浏览器:
谷歌浏览器 11.0.696.68: D:undefined R:undefined LAR
Firefox 4.0.1: D:undefined L R:ok AR
浏览器支持异步但未经过异步测试(预期结果相同):
谷歌浏览器 11.0.696.68: L D:好的 AR R:好的
Firefox 4.0.1: L D:ok AR R:ok
不支持异步的浏览器(期望相同的结果):
Internet Explorer 9: L D:ok AR R:ok
Opera 11.11: L D:好的 AR R:好的
测试脚本
测试.html
<!DOCTYPE HTML>
<head>
<title>Async Test</title>
<script type="text/javascript">
var result = "";
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="test.js" async></script>
<script type="text/javascript">
try{
myFunc();
result += "D:ok ";
} catch(ex) { result += "D:undefined "; }
$(function(){
try{
myFunc();
result += "R:ok ";
} catch(ex) { result += "R:undefined "; }
$('body').text(result);
});
</script>
</head>
<body>
</body>
</html>
测试.js
// Fires straight away when this file is loaded.
result += "L ";
$('body').text(result);
// A test function to see if it's defined in certain parts of the main file.
function myFunc(){
return;
}
// A ready function to see if it fires when loaded async.
$(function(){
result += "AR ";
$('body').text(result);
});
关于javascript - HTML5 脚本元素 - 异步属性 - 何时(以及如何最好地)使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6127829/