Question

在对async做了一些有趣的阅读之后，我找不到任何关于如果你有一个常规脚本标签应该发生什么的信息，然后是一个带有异步的标签。

我尝试了一个快速测试，它似乎做了我希望的事情：如果我首先放置一个非异步标记，它似乎总是在之后的异步属性标记之前加载它。这是我正在测试的代码：

的test.html：

<!doctype html>
<html>
    <head><title>test</title></head>
    <body>
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="test.js" async></script>
    </body>
</html>

test.js：

alert(window.jQuery);

在每种情况下，似乎都加载了jQuery。也许我在测试中遗漏了一些东西。它是否正确？我可以将依赖项放在非异步标记中，然后使用异步放置依赖项吗？这样做特别有益吗？

有没有陷阱？如果你有一些asyncs然后是非异步会发生什么？ async'd js会先加载吗？

Answer 1

这里是我可以回答的问题。很久以前，我不是100％肯定的。

第一个脚本是同步加载的。这意味着它将在该文件完全加载之前进行，然后进入下一行。
取决于何时需要加载此文件。如果必须在加载页面之前加载它，那么就不应该对该文件使用async。
asyncs将同时加载一个非异步。如果你最后有两个非异步。那两个非异步会加载同步。（DUH）
异步将在该行上加载。

我的意思是读者

Answer 2

非异步脚本标记阻止页面处理。浏览器可以向前看并在执行jquery之前加载test.js，但浏览器无法处理脚本，因为它不知道jquery对页面做了什么（document.writeln，更改窗口对象..）。 p>

所以，是的，它会起作用。

执行此操作将使页面加载速度更快，因为可以异步加载两个脚本中的一个。它可能与优化的异步加载器的启动时间不匹配。

将html5 <script async =“”>与非异步<script>标记</script>混合使用

2 个答案: