Javascript HTML5脚本元素-异步属性-何时（如何最佳）使用？_Javascript_Jquery_Html_Asynchronous

Javascript HTML5脚本元素-异步属性-何时（如何最佳）使用？

javascript jquery html asynchronous

Javascript HTML5脚本元素-异步属性-何时（如何最佳）使用？,javascript,jquery,html,asynchronous,Javascript,Jquery,Html,Asynchronous,你能确认我对HTML5的属性的理解吗页面中其他代码引用的任何库都不应指定async属性例如，我的脚本引用可能适当地如下所示： <script src="jquery..." />  <script src="jquery.ui..." /> <!-- async

你能确认我对HTML5的

属性的理解吗

页面中其他代码引用的任何库都不应指定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 ready函数，它会被触发吗？您的ready事件是在异步脚本加载之前还是之后触发的

我已经创建了几个测试文件，非常欢迎您在不同的浏览器上使用它们，看看它们是如何工作的

简短回答关于@Dave的假设：

对于

$（document）.ready（function（）{}

块中的任何代码，可以确定所有异步脚本都已加载

到目前为止，它看起来不像，它非常不一致。在Chrome中，主就绪事件在异步文件加载之前触发，但在Firefox中，它在异步文件加载之后触发

jQuery开发人员必须对此做出决定，不管他们将来是否会（并且能够）支持它

测试页我的测试脚本会弹出一个字符串，显示不同部分的执行顺序。它可以通过以下方式构建：

D:表示主文件中的脚本块已执行。它可以是后跟

：如果函数处于
异步加载的脚本（如果已定义），
或：未定义的
，如果不是


R:表示主文件中的jQuery就绪事件已执行。
如果
函数在异步加载的脚本中
如果已定义，或：未定义
不是

L:异步加载的脚本文件已执行
AR:jQuery-ready事件已在异步加载的脚本中完成
执行



测试结果
支持异步的浏览器：

Google Chrome 11.0.696.68:D:未定义的R:未定义的L AR
Firefox4.0.1:D:未定义的L-R:正常

支持异步但未经异步测试的浏览器（预期结果相同）：

谷歌Chrome 11.0.696.68:ld:ok AR R:ok
Firefox4.0.1:L-D:ok-AR-R:ok

不支持异步的浏览器（预期结果相同）：

Internet Explorer 9:L D:正常AR:正常
歌剧院11.11:L-D:ok-AR-R:ok


测试脚本
test.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>

这个问题也困扰了我一段时间
因此，我刚刚完成了“jqinit.js”的编写。它的目的是以一种方式管理依赖项，您可以像以前那样将它们放入html中。您还可以使用async
加载jquery
它的工作原理主要是检查jquery是否已加载，并将脚本的执行延迟到加载完成为止。另外，您还可以管理脚本之间的依赖关系。它本身也可以加载async

看看它是否符合您的需要（欢迎反馈）：DarthJDG，感谢您花了这么多时间来回复！这非常有帮助，它向我表明（目前），我需要将异步的使用限制在没有依赖项或不创建依赖项的操作上。
// 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);
});