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

问题描述

| 您可以确认我对HTML5的<script async>属性的理解吗？页面中其他代码引用的任何库都不应指定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的假设：对于“ 3”块中的任何代码，我可以确信所有异步脚本均已加载。到目前为止看起来还不一样，这很不一致。在Chrome中，主要的ready事件在异步文件加载之前触发，而在Firefox中，事件在触发异步文件之后触发。 jQuery开发人员必须对此下定决心，无论他们将来是否愿意（或可以）支持它。测试页我的测试脚本吐出一个字符串，该字符串向您显示执行该脚本的不同部分的顺序。它可以通过以下方式构建： D：这意味着主文件中的脚本块已执行。有可能如果函数在如果定义了异步加载的脚本，如果不是，则为ѭ5not。 R：这意味着执行了主文件中的jQuery ready事件。如果异步加载脚本中的功能如果已定义，则为:undefined 不。 L：已执行异步加载的脚本文件。 AR：异步加载脚本中的jQuery ready事件已经被执行。检测结果支持异步的浏览器： Google Chrome 11.0.696.68：D：未定义R：未定义L AR Firefox 4.0.1：D：未定义L R：确定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);
});

,这个问题现在让我安静了一段时间。所以我刚写完\“ jqinit.js \”。它的目的是以某种方式管理依赖项，就像您将它们放入html一样。您也可以用10来加载jquery。它的工作原理主要是检查是否已加载jquery并延迟脚本的执行，直到它加载为止。另外，您还可以管理脚本之间的依赖关系。它本身可以装async。看看是否满足您的需求（欢迎反馈）：https://github.com/ScheintodX/jqinit.js

使用使用使用元素元素属性属性异步最佳脚本脚本

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

问题描述

解决方法

相关问答