通过异步加载来消除阻塞渲染的js和css？

Question

我刚刚花了很长时间搜索...但到处只找到了一些不完整的答案。我正在使用Google页面速度洞察工具来改进我的网站，它告诉我要异步加载我的javascript。我找到了一些代码，但它们没有解释如何加载多个js文件以及如何加载css。我也找不到任何地方告诉我要按什么顺序加载它们。有谁可以帮忙吗？

注意：我确实尝试将js移动到页脚，但这时我的移动菜单就不起作用了（它使用了expand.js文件）。

我需要异步加载的Javascript文件包括：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/h5.js"></script>
    <script language="javascript" type="text/javascript" src="js/expand.js"></script>

我的CSS：

    <link rel="stylesheet" type="text/css" href="style.css">

- Shtarley

---

该报告表示异步加载JS文件，这意味着将JS脚本放在不同的服务器上，以便更快地加载。简言之，这将停止向一个服务器发出多个文件加载请求。如果正在加载插件，则请检查是否有CDN托管这些JS脚本 --- http://www.rackspace.com/knowledge_center/article/what-is-a-cdn - Tasos

好的，我知道这一点，但它只是从不同域加载JS文件的其中一部分。然而，这里有一个解决方案，可以异步加载JS文件---http://screwlewse.com/2010/05/loading-your-javascript-files-asynchronously/ - Tasos

Answer 1

异步加载脚本可能会变得非常复杂。你尝试过使用 "async" 属性吗？例如：

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script async language="javascript" type="text/javascript" src="js/h5.js"></script>
<script async language="javascript" type="text/javascript" src="js/expand.js"></script>

然而，这可能会导致不良的竞态条件。这意味着您站点的其他部分在加载其他资源之前，不会等待这三个JavaScript文件的加载。这可能会根据所包含的内容改善或不改善您站点的速度，并且可能会产生一些奇怪的依赖管理结果，您需要在脚本中进行考虑。

通常建议使用两个小文件：一个CSS文件和一个JavaScript文件，它们将被包含在您的<head/>中，其中包含所有上方折叠内容的样式和逻辑（最好是内联它们，即使这会增加DOM大小）。来源。

- MikeZ

---

如果将脚本标记为异步，则它们可以以任何顺序加载和执行。使用“defer”代替，以使它们始终按正确的顺序执行。 - Macil

Answer 2

如何异步加载Javascript文件？
只需在

- Mohammad Hani