Question

您能否确认我对HTML5的<script async>属性的理解？

页面中其他代码引用的任何库都应 not 指定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 () { }块中的任何代码，我可以放心，所有异步脚本都已加载。

我有这个权利吗？

Answer 1

与所有新的HTML5功能一样，我认为找到答案的最佳方法是在尽可能多的当前浏览器上测试它们。作为一般规则，旧浏览器应完全忽略异步标志，因此代码应按预期工作，按顺序从上到下进行解析。

只要浏览器在处理它们时不一致，如果您不确定它们是否有效，就应该避免在生产代码中使用它们。

这个功能的主要问题是，支持它的浏览器，事件被触发的顺序，例如，如果你在异步加载的脚本中定义一个jQuery就绪函数，它会被解雇吗？在加载异步脚本之前或之后，您的就绪事件是否会触发？

我已经创建了几个测试文件，非常欢迎您在不同的浏览器上玩它们，看看它们的行为方式。

简答

关于@Dave的假设：

对于$(document).ready(function(){}块中的任何代码，我可以放心，所有异步脚本都已加载。

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

如果jQuery开发人员将来（并且可以）支持它，那么jQuery开发人员将不得不对此做出决定。

测试页

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

D：表示主文件中的脚本块已执行。有可能如果函数在，则后跟:ok 如果定义了异步加载脚本，或:undefined如果不是。
R：这意味着主文件中的jQuery ready事件已执行。如果是:ok，则可以跟着它函数在异步加载的脚本中如果已定义，或:undefined如果已定义不
L：已执行异步加载的脚本文件。
AR：异步加载脚本中的jQuery ready事件已经存在执行。

测试结果

支持异步的浏览器：

Google Chrome 11.0.696.68： D：未定义R：未定义L AR
Firefox 4.0.1： D：未定义L R：ok AR

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

Google Chrome 11.0.696.68： L D：ok AR R：ok
Firefox 4.0.1： L D：ok AR R：ok

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

Internet Explorer 9： L D：ok AR R：ok
Opera 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>

test.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);
});

Answer 2

这个问题现在已经让我感到困扰了一段时间。

所以我刚写完了＃34; jqinit.js＆＃34;。它的目的是以一种你可以像你一样将它们放入html中的方式来管理依赖项。您也可以使用async加载jquery。

它主要通过检查是否已加载jquery并延迟脚本的执行直到它具有。作为奖励，您也可以管理脚本之间的依赖关系。它可以加载async本身。

看看它是否符合您的需求（欢迎反馈）：https://github.com/ScheintodX/jqinit.js

HTML5脚本元素 - 异步属性 - 何时（以及如何最好）使用？

2 个答案:

简答

测试页

测试结果

测试脚本