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

HTML5 script element - async attribute - when (and how best) to use?

本文关键字：何最好 使用 何时 元素 脚本 异步 属性 HTML5      更新时间：2023-09-26

你能确认我对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 函数，它会被触发吗？您的就绪事件是在异步脚本加载之前还是之后触发？

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

简答题

关于@Dave的假设：

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

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

jQuery开发人员将不得不对此做出决定，如果他们将来会(并且能够(支持它。

测试页面

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

  • D：这意味着主文件中的脚本块被执行了。它可以是后跟 :ok 如果函数在异步加载的脚本(如果已定义(，如果不是，则:undefined。

  • R：这意味着主文件中的 jQuery ready 事件被执行了。:ok如果异步加载脚本中的函数如果已定义，则:undefined不。

  • L：异步加载的脚本文件已执行。

  • AR：异步加载脚本中的jQuery ready事件已经执行。

测试结果

支持异步的浏览器：

  • 谷歌浏览器 11.0.696.68： D：未定义 R：未定义 L AR

  • 火狐 4.0.1： D：未定义 L R：ok AR

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

  • 谷歌浏览器 11.0.696.68： L D：ok AR R：ok

  • 火狐 4.0.1： L D：ok AR R：ok

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

  • Internet Explorer 9： L D：ok AR R：ok

  • 歌剧 11.11： L D：ok AR R：ok

测试脚本

测试.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);
});
这个问题

也困扰了我一段时间。

所以我刚写完"jqinit.js"。它的目的是以一种你可以像以前一样将它们放入 html 的方式管理依赖项。你也可以用async加载jquery。

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

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

相关文章：