异步加载以消除渲染阻塞js和css？

Question

我只是花了很长时间谷歌搜索...到处找到半答案.我正在使用谷歌页面速度见解来改进我的网站,它告诉我异步加载我的JavaScript.我找到了几个代码,但他们没有解释如何加载多个js文件以及如何加载css.我也找不到它告诉我加载它的顺序的任何地方.有人可以帮忙吗？

注意:我DID尝试将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">

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 文件加载后再加载其他资源。这可能会也可能不会提高站点的速度，具体取决于所包含的内容，并且可能会在依赖项管理方面产生一些不稳定的结果，您必须在脚本中考虑到这一点。

大 G 通常建议创建两个小文件：一个 CSS 和一个 JavaScript 文件，包含在您的文件中，其中<head/>包含首屏内容的所有样式和逻辑（或者更好的是：内联它们，即使这会增加 DOM 大小）。来源。